{ Repost from my personal blog @ https://blog.codezero.xyz/building-interactive-elements-with-html-and-javascript-drag-and-drop }
Traditionally, all interactions in a website has been mostly via form inputs or clicking on links/button. The introduction of native Drag-and-drop as a part of the HTML5 spec, opened developers to a new way of Graphical input. So, how could this be implemented ?
Making any HTML element draggable is as simple as adding draggable="true"
as an attribute.
<div id="a-draggable-div" draggable=true>
<h4>Drag me</h4>
</div>
This will allow the user to drag div#a-draggable-div
. Next, we need to designate a dropzone, into which the user can drop the div.
<div id="dropzone" ondragover="onDragOver(event)">
</div>
function onDragOver(e) {
// This function is called everytime
// an element is dragged over div#dropzone
var dropzone = ev.target;
}
Now, the user will be able to drag the element. But, nothing will happen when the user drops it into the dropzone. We’ll need to define and handle that event. HTML5 provides ondrop
attribute to bind to the drop event.
When the user drops the div into the drop zone, we’ll have to move the div from it’s original position into the drop zone. This has to be done in the drop
event.
<div id="dropzone"
ondrop="onDrop(event)"
ondragover="onDragOver(event)"> </div>
function onDrop(e) {
e.preventDefault();
var draggableDiv = document.getElementById("a-draggable-div");
draggableDiv.setAttribute("draggable", "false");
e.target.appendChild(draggableDiv);
}
So, when the user drops the div into the drop zone, we’re disabling the draggable
property of the div and appending it into the drop zone.
This is a very basic drag and drop implementation. It gets the job done. But, HTML5 provides us with more events to make the user’s experience even better 1.
Event | Description |
---|---|
drag | Fired when an element or text selection is being dragged. |
dragend | Fired when a drag operation is being ended (for example, by releasing a mouse button or hitting the escape key). |
dragenter | Fired when a dragged element or text selection enters a valid drop target. |
dragexit | Fired when an element is no longer the drag operation’s immediate selection target. |
dragleave | Fired when a dragged element or text selection leaves a valid drop target. |
dragover | Fired when an element or text selection is being dragged over a valid drop target |
dragstart | Fired when the user starts dragging an element or text selection. |
drop | Fired when an element or text selection is dropped on a valid drop target. |
With these events a little bit of css magic a more user friendly experience can be created like highlighting the drop zones when the user starts to drag an element or changing the element’s text based on its state.
Demo:
https://jsfiddle.net/niranjan94/tkbcv3md/16/embedded/