html5의 드래그 앤 드롭은 물론, 기타 모니터링 이벤트 및 실행 순서를 파악하는데 5분 정도 소요됩니다.
정의 및 사용법드래그 앤 드롭 프로세스 중에 다음 이벤트가 트리거됩니다.
드래그 대상(소스 요소)에서 이벤트를 트리거합니다.
대상이 해제될 때 트리거되는 이벤트:
Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 드래그를 지원합니다.
참고: Safari 5.1.2는 드래그를 지원하지 않습니다. 요소를 드래그할 때 ondragover 이벤트는 350밀리초마다 트리거됩니다.
예는 다음과 같습니다:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>5분 드래그 앤 드롭의 간결한 예시</title> <style> #draggable { width: 200px height: 20px; text-align: center; } .dropzone { width: 200px; margin-bottom: 10px } </style> <script> 문서 .addEventListener(dragstart, 함수(이벤트) { console.log('==========dragstart 드래그 시작==========드래그는 한 번만 실행됩니다.'); // 드래그된 요소의 참조를 저장합니다(참조) dragged = event.target; // 반투명하게 만듭니다. style.opacity = .5; }, false); /* 대상 요소가 드래그되면 드래그 이벤트가 트리거됩니다.*/ document.addEventListener(drag, function (event) { // console.log('==========drag==========요소가 삭제될 때까지 드래그가 계속 모니터링됩니다.'), false); element Trigger events */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== 드래그할 때 항상 수신합니다. 요소가 삭제될 때까지'); // 기본 동작을 방지하여 드롭을 활성화합니다. event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter는 해당 요소를 대상 요소로 드래그합니다.========== to dragleave '); // 드래그 가능한 요소가 드롭존에 들어갈 때 대상 노드를 강조 표시합니다. if (event.target.className == dropzone) { event.target.style.Background = } }, false); document.addEventListener(dragleave, function (event) { console.log('==========dragleave는 요소를 대상 요소에서 멀리 드래그합니다==========dragleave에 해당함') ; // 드래그된 요소가 놓기 가능한 대상 노드를 벗어나면 배경을 재설정합니다. if (event.target.className == dropzone) { event.target.style.Background = } }, false); (이벤트 ) { console.log('==========드롭 드롭 요소==========드래그는 한 번만 실행되며, 드래그엔터 이전에 트리거됩니다.'); 일부 요소에 대한 링크 열기) event.preventDefault(); // 드래그한 요소를 선택한 드롭 영역 노드로 이동합니다. if (event.target.className == dropzone) { event.target.style.ground = ; (끌어옴); event.target.appendChild(dragd) } }, false); document.addEventListener(dragend, function (event) { console.log('=========dragend end drag====== =====드래그는 한 번만 실행됩니다.'); //투명도 재설정 event.target.style.opacity = }, false) </script></head><body> <div class=dropzone> < div ID=드래그 가능 draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> 드래그할 수 있는 DIV입니다. </div> </div> <div class=dropzone></div> <div class= 드롭존 ></div> <div class=dropzone></div></body></html>위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.