Example Analysis of drag and drop in html5
Editor to share with you the example analysis of drag and drop in html5, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
Definition and usage
The following events are triggered during drag and drop:
Trigger an event (source element) on the drag target:
Ondragstart-triggered when the user starts dragging the element
Ondrag-triggered when the element is dragging
Ondragend-triggered after the user has finished dragging the element
Events triggered when the target is released:
Ondragenter-this event is triggered when an object dragged by the mouse enters its container range
Ondragover-this event is triggered when a dragged object is dragged within the scope of another object container
Ondragleave-this event is triggered when an object dragged by the mouse leaves its container range
Ondrop-this event is triggered when the mouse button is released during a drag
Browser support
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 350ms.
Examples are as follows:
5-minute drag and drop concise example # draggable {width: 200px; height: 20px; text-align: center; background: white;} .dropzone {width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px } var dragged; document.addEventListener ("dragstart", function (event) {console.log ('= dragstart starts to be dragged = dragged only once'); / / saves a reference to the dragged element (ref.) Dragged = event.target; / / make it translucent event.target.style.opacity = .5;}, false); / * trigger the drag event * / document.addEventListener when dragging the target element ("drag", function (event) {/ / console.log ('= drag= drag until the element is dropped');}, false) / * trigger event * / document.addEventListener when placing the target element ("dragover", function (event) {/ / console.log ('= dragover= will listen until the element is dropped'); / / block the default action to enable drop event.preventDefault ();}, false) Document.addEventListener ("dragenter", function (event) {console.log ('= dragenter drag the element into the target element = corresponding to dragleave'); / / highlight the target node if (event.target.className = = "dropzone") {event.target.style.background = "purple" when the draggable element enters the target that can be placed }, false); document.addEventListener ("dragleave", function (event) {console.log ('= dragleave dragging the element away from the target element = corresponding to the dragenter') / / when dragging the element away from the 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 = drag only once, triggered before dragenter); / / block default actions (such as opening links to some elements) event.preventDefault () / / drag the element to the selected placement target node if (event.target.className = = "dropzone") {event.target.style.background = ""; dragged [XSS _ clean] .removeChild (dragged); event.target.appendChild (dragged);}}, false) Document.addEventListener ("dragend", function (event) {console.log ('= dragend end drag = drag only once); / / reset transparency event.target.style.opacity = "";}, false)
