Drag and Drop Api

January 16, 2020

Drag and Drop

정의 : 요소를 드래그해서 새로운 요소로 이동하는 것!(HTML 5)
속성 및 이벤트 종류
- 속성 : dataTransfer
- 이벤트의 종류
  - drag : 마우스 드래그 했을떄 발생
  - dragend : 마우스 드래그가 종료했을떄(버튼 릴리즈)
  - dragenter : 드래그 한 요소가 다른 요소로 접근했을떄
  - dragexit
  - dragleave : 드래그한 요소가 유요한 곳을 떠날떄
  - dragover : 드래그한 요소를 유요한 곳을 지날때
  - dragstart : 드래그를 발생할 요소에 정의
  - drop : 드래그한 요소를 유효한 곳에 놓을때

사용법

드래그가 가능한 요소를 만들자

<tag draggable="true"></tag>

드래그가 발생할 때 필요한 데이터를 저장

// ondragstart는 drag 발생할때 처음으로 발생하는 이벤트 // 이유 : 드래그한
요소에 대한 정보를 저장하기 위해
<tag draggable="true" ondragstart="drag(event)"></tag>

// 정보를 저장하기 위해 드래그 이벤트 속성에 있는 dataTransfer에 setData(키, 벨류)로 저장
function drag(ev) {
    ev.dataTransfer.setData('키', 벨류)
}

드래그가 발생하면 브라우져에서 기본적으로 삭제를 시도한다 이러한 삭제를 방지하자

ev.preventDefault() // allowDrop();

드랍할 곳!에 이벤트를 정의하자

// ondragover : 브라우져 삭제 방제 // ondrop으로 드랍된 데이터를 사용하자
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

// 정보를 저장하기 위해 드래그 이벤트 속성에 있는 dataTransfer에 setData(키, 벨류)로 저장
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData('키');
    ev.target.appendChild(document.getElementById(data));
    <!-- 저장한 데이터(아이디 값)을 가지고 요소를 drop한 곳에 appendChild를 통해 추가해준다  -->
  }

분석 소스

<script>
    function allowDrop(ev) {
        ev.preventDefault()
    }

    function drag(ev) {
        ev.dataTransfer.setData('text', ev.target.id)
    }

    function drop(ev) {
        ev.preventDefault()
        var data = ev.dataTransfer.getData('text')
        ev.target.appendChild(document.getElementById(data))
    }
</script>
<body>
    <h2>Drag and Drop</h2>
    <p>Drag the image back and forth between the two div elements.</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img
            src="img_w3slogo.gif"
            draggable="true"
            ondragstart="drag(event)"
            id="drag1"
            width="88"
            height="31"
        />
    </div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>