HTML Drag and Drop

HTML5는 드래그 앤 드롭 이벤트를 도입하여 웹 페이지에 드래그 앤 드롭 가능한 요소를 만들 수 있다.

<div id="drag-element" draggable="true">Drag me</div>
<div id="drop-element" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<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));
  }

  var dragElement = document.getElementById("drag-element");
  dragElement.addEventListener("dragstart", drag);
</script>

이 예에서, 우리는 두 개의 요소, 즉 ID가 "드래그-요소"인 <div>와 ID가 "드롭-요소"인 <div>를 가지고 있다. 드래그 요소 div는 드래그 가능한 속성을 "true"로 설정하여 드래그할 수 있다. "drop-element" div에는 "ondrop"과 "ondragover"라는 두 개의 이벤트 수신기가 있는데, 이는 각각 요소가 "drop-element" div에 드롭될 때와 요소가 "drop-element" div 위로 끌릴 때 호출된다.

드래그(이벤트) 함수는 요소가 끌릴 때 전송될 데이터(이 경우에는 요소의 ID)를 설정하는 데 사용된다.