When performing a drag or "drag" of an object in HTML, what are the events that I can find and what can I do with them?
Here some of them:
var dragged;
document.addEventListener("drag", function( event ) {
dragged = event.target;
}, false);
document.addEventListener("dragover", function( event ) {
event.preventDefault();
}, false);
document.addEventListener("drop", function( event ) {
event.preventDefault();
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
}
}, false);
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
<div class="dropzone">
<div id="draggable" draggable="true" ondrag="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
drag start
The event
dragstart
fires when the user begins to drag an element or text selection.drag
The event
drag
fires after a few hundred milliseconds when the user drags an element or text selection.dragend
The event
dragend
fires when a drag operation is finished (by releasing the mouse button or by pressing the escape key).dragover
The event
dragover
fires when an element or text selection is dragged over a valid target (after a few hundred milliseconds).The event fires on the drop target(s).
dragenter
The event
dragenter
fires when a dragged element or text selection enters a valid destination.dragleave
The event
dragleave
fires when a dragged element or text selection leaves a valid destination.drop
The event
drop
fires when an item or text selection is dropped on a valid delivery destination.Example