5. HTML요소의 드래그&드랍 API

특정 엘리먼트를 원하는 위치로 드래그하여 옮기는 방식이며 아래와 같은 경우에 사용할 수 있다.

• 데이터를 가진 엘리먼트 위치를 바꾸는 경우
• 파일을 업로드 하는 경우
• 데이터를 삭제/추가 하는 경우

 

드래그&드랍 이벤트

이벤트	설명
dragstart	사용자가 객체(object)를 드래그하려고 시작할 때 발생함.
dragenter	마우스가 대상 객체의 위로 처음 진입할 때 발생함.
dragover	드래그하면서 마우스가 대상 객체의 위에 자리 잡고 있을 때 발생함.
drag	대상 객체를 드래그하면서 마우스를 움직일 때 발생함.
drop	드래그가 끝나서 드래그하던 객체를 놓는 장소에 위치한 객체에서 발생함.
dragleave	드래그가 끝나서 마우스가 대상 객체의 위에서 벗어날 때 발생함.
dragend	대상 객체를 드래그하다가 마우스 버튼을 놓는 순간 발생함.

 

 

드래그 가능한 대상 지정

<script>
  function dragstart_handler(ev) {
    ev.dataTransfer.setData("text/plain", ev.target.id);
  }

  window.addEventListener('DOMContentLoaded', () => {
    const element = document.getElementById("p1");
    element.addEventListener("dragstart", dragstart_handler);
  });
</script>

<p id="p1" draggable="true">This element is draggable.</p>  //draggalbe속성 추가

 

드래그 데이터 정의

function dragstart_handler(ev) {
  ev.dataTransfer.setData("text/plain", ev.target.innerText);
  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
  ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
}

 

드래그 이미지 정의

SetDragImage()를 이용해 정의

function dragstart_handler(ev) {
  let img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

 

드래그 효과 정의

- copy : 끌어온 데이터가 현재 위치에서 놓을 위치로 복사됨

- move : 끌어온 데이터가 현재 위치에서 놓을 위치로 이동됨

- link : 소스와 드롭위치 사이에 어떤 관계 또는 연결이 이뤄짐(?)

function dragstart_handler(ev) {
  ev.dataTransfer.dropEffect = "copy";
  ev.dataTransfer.dropEffect = "move";
  ev.dataTransfer.dropEffect = "link";
}

 

드롭 존 정의

- ondragover

- ondrop

<script>
function dragover_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move";
}
function drop_handler(ev) {
 ev.preventDefault();
 const data = ev.dataTransfer.getData("text/plain");
 ev.target.appendChild(document.getElementById(data));
}
</script>

<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>

 

드롭 효과처리

<script>
function dragstart_handler(ev) {
 ev.dataTransfer.setData("application/my-app", ev.target.id);
 ev.dataTransfer.dropEffect = "move";
}
function dragover_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 const data = ev.dataTransfer.getData("application/my-app");
 ev.target.appendChild(document.getElementById(data));
}
</script>

<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>

 

드래그 엔드

- dragend