html5 문서의 시작은 동일하다. !DOCTYPE HTML, html, head 태그를 기입한다.
이 예제는 head 태그내에 style 과 script 를 기입한다.
style type="text/css"
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
스타일시트 를 지정하는데 스타일을 적용할 영역을 선택해주고( div1, div2 ) 속성을 지정한다.
요소를 Drag할수 있도록 만들기 위해서는 draggable 속성을 true 로 설정해야 한다.
그 다음으로 요소가 드래그되어질때 무슨일이 일어나야 하는지를 정해야 한다.
요소의 ondragstart 속성이 drag(event) 함수를 호출하는데 이 함수는 어떤 요소가 드래그 되어지는지를 지정한다.
드래그되어진 데이타가 드랍되어 지는 곳에 ondragover 이벤트가 호출되어 있어야 한다.
기본적으로 요소나 데이타는 다른 요소에 드랍되어 질수 없다. 드랍될수 있도록 하기 위해서는 요소의 기본적인 흐름을 차단해야 한다. ondragover 이벤트를 위한 event.preventDefault() 메소드를 호출함으로써 만들수 있다.
드래그된 데이타가 놓여 질때 drop(event) 이벤트가 발생한다.
드랍되어지는 요소의 ondrop 속성에서 drop 이벤트를 호출한다.
script type="text/javascript"
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id); //이벤트가 발생하는 객체의 파라미터명을 텍스트로 해서 해당객체의 id값을 부여
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text"); // 드래그된 데이타를 얻어온다.
ev.target.appendChild(document.getElementById(data)); // 드래그된 데이타의 ID 값을 얻어서 드래그되어진 요소에 추가한다.
ev.preventDefault(); // 브라우저의 기본적인 데이타처리를 막기위해 호출한다.
}
body 태그를 기입한다.
div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"
// 요소를 Drag할수 있도록 만들기 위해서는 draggable 속성을 true 로 설정해야 한다.
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31" />
div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"
희망잡이