우리가 많이 알고 있는 Drag의 의미
이런식으로 마우스 드래그를 먼저 생각할 수 있고,
이렇게 생각하실 수 있습니다.
위의 사진은 정확히 Drag & Drop 할 때의 드래그이고, 두번째 이미지의 드래그는 마우스 Selection 입니다.
Drag & Drop
Drag & Drop은 mouse를 이용해서 특정 컴포넌트를 잡았을 때 동작이 될 수 있는 이벤트 입니다. 이 이벤트를 통해서 컴포넌트 다른 위치로 넘기게 할 수 있습니다.
<p>Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p id="demo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.getElementById("demo").innerHTML = "The p element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The p element was dropped";
}
</script>
이런식으로 onDrag 이벤트와 onDrop 이벤트를 이용해서 Drag & Drop을 구현할 수 있습니다.
예시코드 https://react-select.com/home
Mouse Selection
이 경우에는 Javascript function을 이용해서 접근할 수 있습니다.
Example
// addEventListener version
document.addEventListener("selectionchange", () => {
console.log(document.getSelection());
});
// onselectionchange version
document.onselectionchange = () => {
console.log(document.getSelection());
};
MDN에 정의 되었는 API를 사용해서 text가 selection 되었을 때에 event가 발생이 되므로 그 발생된 event에서 selection된 text의 value 값과 anchorOffset, focusOffset (text 시작점, 끝 점 ) 값들을 얻을 수 있습니다.
//react 사용시
...
useEffect(() => {
document.addEventListener("selectionchange", () => {
console.log(document.getSelection());
});
})
...
이런식으로 사용하실 수 있습니다.
그 외의 Mouse Selection Trick
위 방법으로하게 되면 selection 된 Text는 가져올 수 있지만 position값이 정확하지 않아서 특정 이벤트를 줄 때 힘들 수 있습니다.
handleEvent = (event) => {
if (event.type === "mousedown") {
this.setState({ message: "Mouse Down"});
} else {
this.setState({ message: "Mouse Up"});
}
}
...
<div onMouseUp={e} />
...
이런식으로 사용하면 position값을 좀 더 쉽게가져올 수 있습니다.
주의사항
onDragOver나 onDrop을 사용하게 된다면 draggable를 true로 주어야 onDrag와 onDrop이 될 수 있습니다. Mouse Selection 이용할 때 user-select: none; 이 되어있으면 select가 안되므로 사용할 컴포넌트에서는 user-select를 풀어서 사용하시면 됩니다.