Drag-and-drop is a typical user interaction used in many graphical user interfaces. There are JavaScript libraries available for adding a drag-and-drop capability to your project.
In this tutorial, we’ll create a drag-and-drop example by combining the HTML Drag and Drop API with vanilla JavaScript to use event handlers.
Next, we will see the best plugins to add drag and drop functionality to your web pages.
Read: How to center a div with Bootstrap, Tailwindcss, or Pure CSS?
Read: How to create colorful shadows in Bootstrap, Tailwind, or CSS?
Table of Contents
HTML drag and drop API
Any element in HTML can be dragged and dropped.
The following is a simple drag-and-drop example:
<div id="div-dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div-drag" draggable="true" ondragstart="drag(event)" width="336" height="69">Drag Me</div>
#div-dropzone {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #aaaaaa;
border-radius:5px;
display:flex;
justify-content:center;
align-items:center;
}
#div-drag{
width:100px;
height:100px;
background:#ddd;
display:flex;
justify-content:center;
align-items:center;
border-radius:5px;
}
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
Example: Drag the “Drag Me” into the rectangle
Drag and Drop using the JavaScript library, (The Draggabilly)
If you need a more advanced solution for the drag and drop feature, the “Draggabilly” library can do this job very well.
For example, look at this demo on codepen:
See the Pen Draggabilly v3 – with vanilla JS by Dave DeSandro (@desandro) on CodePen.
How to use the Draggabilly?
Installation
Install with npm: npm install draggabilly
Install with Yarn: yarn add draggabilly
You may use the CDN:
<script src="https://unpkg.com/[email protected]/dist/draggabilly.pkgd.min.js"></script>
Basic Usage
Initialize Draggabilly as a jQuery plugin
var $draggable = $('.draggable').draggabilly({
// options...
})
Initialize Draggabilly with vanilla JS
var elem = document.querySelector('.draggable');
var draggie = new Draggabilly( elem, {
// options...
});
// or pass in selector string as first argument
var draggie = new Draggabilly( '.draggable', {
// options...
});
// if you have multiple .draggable elements
// get all draggie elements
var draggableElems = document.querySelectorAll('.draggable');
// array of Draggabillies
var draggies = []
// init Draggabillies
for ( var i=0; i < draggableElems.length; i++ ) {
var draggableElem = draggableElems[i];
var draggie = new Draggabilly( draggableElem, {
// options...
});
draggies.push( draggie );
}
Read Mor about the draggabilly on GitHub.
Enable draggable functionality using jQueryUI
Draggable capability can be enabled on any DOM element. Drag the draggable object around the viewport by clicking and dragging it with the mouse.
$( function() {
$( "#draggable" ).draggable();
} );
See the Pen jQuery UI Draggable Div by Nick Winters (@nickwinters) on CodePen.
Learn More about the jQueryUI Draggable on the official site.
Add comment