[api] HTML5 - Drag and Drop - 마우스로 끌어서 놓기 (= 드래그앤드롭)

1. Drag and Drop 예제 - 1회만
2. Drag and Drop 예제 - 반복

Drag and Drop 예제 - 1회만

 

<style>

#box {

  width: 60px;

  height: 50px;

  padding: 10px;

  border: 1px solid silver;

  margin: 0 0 20px;

}

</style>

<script>

function drag(ev) {

  ev.dataTransfer.setData("text", ev.target.id);

}

 

function dragOver(ev) {

  ev.preventDefault(); // 요소이동불가 기본동작을 차단 (= 드롭 허용)

}

 

function drop(ev) {

  ev.preventDefault(); // 링크로 열리는 기본동작을 차단

  var data = ev.dataTransfer.getData("text");

  ev.target.appendChild(document.getElementById(data));

}

</script>

<div id="box" ondrop="drop(event)" ondragover="dragOver(event)"></div>

 

<img id="hz" src="https://i.imgur.com/PQNhCln.gif" draggable="true" ondragstart="drag(event)">

 

결과보기

---

[코드 설명]

 

1.

draggable="true" 속성

드래그 할 대상에 추가해 드래그 가능하도록 설정.

 

2.

ondragstart 이벤트

이 이벤트 발생 시, 드래그 할 데이터를 지정하는 drag (event) 함수가 호출됨.

dataTransfer.setData() 메소드 : 데이터 유형과 드래그 된 데이터의 값을 설정.

이 경우 데이터 유형은 "text"이고, 값은 드래그 가능한 요소의 id임. ( "hz")

 

3.

ondragover 이벤트

이 이벤트 발생 시, 드래그 한 데이터를 놓을 위치를 지정함.

데이터와 요소는 원래 다른 요소로 끌어다놓을 수 없으므로,

이를 끌어다놓기 위해선, 요소의 기본동작을 차단해야 가능. (아래 메서드 이용)

event.preventDefault()

 

4.

ondrop 이벤트

이 이벤트 발생 시, drop(event) 함수 호출.

event.preventDefault() 메서드로 데이터에 대한 브라우저 기본 처리 차단. (※ 기본값: 드롭 시 링크로 열림.)

dataTransfer.getData() 메소드로 드래그 한 데이터 가져옴.

이 메소드는 setData () 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환.

드래그 한 데이터는 드래그 한 요소의 ID임. ( "hz").

드래그 한 요소를 드롭 요소에 추가.

 

Drag and Drop 예제 - 반복

 

<style>

#box1, #box2 {

  float: left;

  width: 80px;

  height: 50px;

  margin: 10px;

  padding: 10px;

  border: 1px solid black;

}

</style>

<script>

function drag(ev) {

  ev.dataTransfer.setData("text", ev.target.id);

}

 

function dragOver(ev) {

  ev.preventDefault();

}

 

function drop(ev) {

  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");

  ev.target.appendChild(document.getElementById(data));

}

</script>

<div id="box1" ondrop="drop(event)" ondragover="dragOver(event)">

  <img src="https://i.imgur.com/PQNhCln.gif" draggable="true" ondragstart="drag(event)" id="drag1">

</div>

<div id="box2" ondrop="drop(event)" ondragover="dragOver(event)"></div>

 

결과보기