Drag and drop is a feature websites often use to simplify selection of html elements or files. Typically, I usually make an element draggable, if I need an html element, and handle the drag start and drop events to achieve the effect. This can be done with straight JavaScript as this W3Schools example shows:
ev.preventDefault();
}function drag(ev) {
ev.dataTransfer.setData(“text”, ev.target.id);
}function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>
The main items to implement drag and drop are:
- Set the draggable attribute to true so the img element can be dragged.
- Set the dragstart event attribute on the img element to call the event handler.
- Set the div element’s dragover and drop event attributes to call the appropriate event handler.
With these attributes setup, the img element can be dragged and dropped onto the div element.
The process starts when the user begins to drag the img which invokes the drag event function. This event handler saves the id of the element being dragged (i.e.; “drag1”) in the dataTransfer object property with a key of “text”. When the user has released the img over the div element, the drop event function is invoked. The drop event retrieves the id of the element being dragged from the dataTransfer object “text” property, then selects the element, and appends it to the div element. The dragover event function gives you control on how the cursor should appear when the dragged element is over the drop target but not dropped yet.
All in all, this is a pretty simple process to implement using just plain JavaScript. You can simplify this implementation quite a bit using jQuery. Another library called Dragula can also simplify this process without the jQuery library.
Dragula’s says it makes “drag and drop so simple it hurts”. It features:
- Super easy to set up
- No bloated dependencies
- Figures out sort order on its own
- A shadow where the item would be dropped offers visual feedback
- Touch events!
- Seamlessly handles clicks without any configuration
Once the library is referenced, you can use Dragula by simpling adding code as follows:
An example of a using dragula allowing for the drag and drop between two elements with the id’s left and right is shown below:
While the standard implementation of drag and drop is simple enough, and while Dragula does make it easier, what I like about Dragula are the additional features it provides. There are events galore allowing you to handle just about any possible action that can occur during a drag and drop operations. You can have the drag and drop copy, move, or delete items as needed. Sort the resulting set of items dropped. Retain links on the dragged and dropped items. All easily setup in your code.
Here’s an example where we can move items between elements and set the CSS style to highlight the dropped item:
.on(‘drag’, function (el) {
el.className = el.className.replace(‘ex-moved’, ”);
}).on(‘drop’, function (el) {
el.className += ‘ ex-moved’;
}).on(‘over’, function (el, container) {
container.className += ‘ ex-over’;
}).on(‘out’, function (el, container) {
container.className = container.className.replace(‘ex-over’, ”);
});
There’s a lot more to explore with Dragula. Check out their demo. You can download Dragula and read all of the options it provides at github.