How to drag and drop in JavaScript or jQuery?

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?

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.