[JavaScript] 드래그 앤 드롭 _ drag and drop _ 자바스크립트
드래그&드롭 | [출처 : https://www.w3schools.com/html/html5_draganddrop.asp]
w3school에 있는 자료를 바탕으로 실습해보는 글 입니다. 소스코드를 분석하면서 하나하나 어떤 원리도 동작하는지 살펴보려고 합니다. 퍼온 예제는 다음과 같습니다.
예제 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<style>
#div1 {
width: 250px;
height: 250px;
padding: 10px;
margin: 0px 10px 0px 0px;
border: 1px solid #aaaaaa;
float: left;
}
#div2 {
width: 250px;
height: 250px;
padding: 10px;
border: 1px solid #aaaaaa;
float: left;
}
</style>
<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>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/512px-Unofficial_JavaScript_logo_2.svg.png" draggable="true" ondragstart="drag(event)" width="250px" height="250px">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
결과 |
설명 |
1. 드래그 함수
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
드래그 했을시, 드래그 당하고 있는 해당 객체의 id를 가져와서 dataTransfer.setData로 담아줍니다. 해당 객체의 별명을 text로 지정해주게 됩니다. 그러면 다음 함수인 drop()에서 별명을 통해 데이터를 전달받게 됩니다. drop() 함수를 보겠습니다.
2. 드롭 함수
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}위에서 text로 별명을 주었던 것을 getData()해서 가져옵니다. 그 데이터르 drop되는 위치에 append 시켜줌으로써 드래그 앤 드롭은 끝 입니다.
3. preventDefault 함수
마지막으로 이벤트발생 방지 함수를 통해서 선택한 객체의 다른 이벤트들을 막아줍니다. (저도... 아직 잘 모르겠어요.)
function allowDrop(ev) {
ev.preventDefault();
}