HTML5 드래그 앤 드롭 작업 HTML5는 웹 페이지의 드래그 앤 드롭 작업을 구현합니다. elements_html5 튜토리얼 기술

<script><br> function init(){<br> var info = document.getElementById("info");<br> //드래그 앤 드롭 요소를 가져옵니다. 이 예에서는 사진 앨범은 DIV<br> var src = document.getElementById("album");<br> //드래그 앤 드롭 작업 시작<br> src.ondragstart = function (e) {<br> //ID 가져오기 드래그 앤 드롭한 사진 <br> var dragImgId = e.target.id;<br> //드래그한 요소 가져오기<br> var dragImg = document.getElementById(dragImgId);<br> //드래그 앤 드롭 작업 종료<br> dragImg.ondragend = function(e){<br> //알림 정보 복원<br> info.innerHTML="<h2>따뜻한 알림: 사진을 휴지통으로 직접 드래그할 수 있습니다</h2>"; <br> }; <br> e.dataTransfer.setData("text",dragImgId);<br> };<br> //드래그 앤 드롭 프로세스 중 <br> src.ondrag = function(e){ <br> info.innerHTML=" <h2>--사진을 드래그하는 중입니다--</h2>";<br> }<br> //드래그 앤 드롭 대상 요소 가져오기<br> var target = document. getElementById("trash"); <br> //기본 처리 끄기; <br> target.ondragenter = function(e){<br> e.preventDefault();<br> }<br> target.ondragover = function (e){<br> e .preventDefault(); <br> }<br> //대상 요소에 무언가를 드래그 앤 드롭했습니다. <br> target.ondrop = function (e) {<br> var draggedID = e .dataTransfer.getData("text"); <br> //앨범의 DOM 개체 가져오기 <br> var oldElem = document.getElementById(draggedID);<br> //앨범 DIV에서 사진의 노드 제거 <br> oldElem.parentNode.removeChild(oldElem); <br> //휴지통 DIV에 드래그한 사진 DOM 노드를 추가합니다. <br> target.appendChild(oldElem);<br> info.innerHTML="<h2&gt ;따뜻한 팁: 사진을 직접 휴지통으로 드래그할 수 있습니다</h2>";<br> e.preventDefault();<br> }<br> }<br> </script>