목차
- Drag and Drop 예제 - 1회만
- 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>
결과보기
