HTML5 드레그&드랍 draggable, ondragstart, ondrop, ondragover

 

 

 

1. draggable  속성

drag & drop 을 가능하게 하려면, 해당 엘리먼트에 draggable 속성을 주어야한다. 
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

 

2. ondragstart 이벤트

 

drag 가 시작될 경우에 발생하는 이벤트로서, 보통 drag 되는 엘리먼트의 id 값을 전달하는 함수를 실행하게된다.

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

 

function drag(ev) {    ev.dataTransfer.setData("text", ev.target.id);    // text 라는 임의의 변수에 drag 되는 엘리먼트의 id 값을 세팅한다. 

 

}

 

3. ondrop 이벤트
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
drop 이 실행됐을 때 발생하는 이벤트가 ondrop 이벤트이다.보통, drag 에서 전달한 drag가 일어난 엘리먼트의 아이디를 받는 함수를 호출하게 된다.
function drop(ev) {    ev.preventDefault();    var data = ev.dataTransfer.getData("text");    ev.target.appendChild(document.getElementById(data));

 

}

4. ondragover 이벤트
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
drop 이 완료됐을 때 발생하는 이벤트가 ondragover 이벤트이다.드래그 완료시 해당 엘리먼트의 기본 동작을 막아주게된다.
function allowDrop(ev) {    ev.preventDefault();

 

}

 

 

 

5. preventDefault() 이벤트 함수 

 

preventDefault() 함수는 특정 엘리먼트에 이벤트가 발생했을 때,

그 이벤트로 인하여 발생하는 동작을 막는 함수이다.

<a id="myAnchor" href="http://w3schools.com/">Go to W3Schools.com</a>    

                     

<p>The preventDefault() method will prevent the link above from following the URL.</p>

 

<script>

document.getElementById("myAnchor").addEventListener("click", function(event){

    event.preventDefault()

});

</script>

 

위의 경우,  <a> 태그를 클릭할 경우, href  속성에 의해  http://w3schools.com 으로 링크하게 되어있지만,

script 부분에서 click 이벤트를 받아서 preventDefault() 함수를 실행하게 하므로

결국, <a> 태그의 기본동작이 일어나지 않게된다.

 

 

jQuery 에서도 preventDefault() 함수가 존재한다.

$("a").click(function(event){
    event.preventDefault();
});