It takes 5 minutes to figure out the drag and drop of html5, as well as the order of other monitoring events and execution.
Definition and usageThe following events will be triggered during the drag and drop process:
Trigger an event on the drag target (source element):
Events triggered when the target is released:
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.
Note: Safari 5.1.2 does not support dragging; when dragging an element, the ondragover event is triggered every 350 milliseconds.
Examples are as follows:
<!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-minute drag and drop concise example</title> <style> #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } </style> <script> var dragged; document .addEventListener(dragstart, function (event) { console.log('==========dragstart Start being dragged==========A drag is only executed once'); // Save the reference of the dragged element (ref.) dragged = event.target; // Make it translucent event.target .style.opacity = .5; }, false); /* The drag event is triggered when the target element is dragged*/ document.addEventListener(drag, function (event) { // console.log('==========drag==========Drag will continue to monitor until the element is dropped'); }, false); /* When placing the target element Trigger events */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== Will always listen when dragging, Until the element is dropped'); // Prevent the default action to enable drop event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter drags the element into the target element==========corresponds to dragleave '); // Highlight the target node when the draggable element enters the dropzone if (event.target.className == dropzone) { event.target.style.background = purple; } }, false); document.addEventListener(dragleave, function (event) { console.log('==========dragleave drags the element away from the target element==========corresponds to dragenter'); // When the dragged element leaves the droppable target node, reset its background if (event.target.className == dropzone) { event.target.style.background = ; } }, false); document.addEventListener(drop, function (event ) { console.log('==========drop drop element==========A drag is only executed once, triggered before dragenter'); // Prevent default actions (such as opening Links to some elements) event.preventDefault(); // Move the dragged element to the selected drop zone node if (event.target.className == dropzone) { event.target.style.background = ; dragged.parentNode .removeChild(dragged); event.target.appendChild(dragged); } }, false); document.addEventListener(dragend, function (event) { console.log('==========dragend ends drag====== =====A drag is only executed once'); //Reset transparency event.target.style.opacity = ; }, false); </script></head><body> <div class=dropzone> <div id=draggable draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> This is a DIV that can be dragged </div> </div> <div class=dropzone></div> <div class=dropzone ></div> <div class=dropzone></div></body></html>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.