What Is Drag And Drop?
Drag And Drop is one of the most commonly used features in today's web page or applications that allow the user to change the position of an object (element) by using mouse drag or touch events.
How does Drag and Drop work?
HTML5 (the latest version of Hypertext Markup Language) provides a basic HTML Drag and Drop API on your web app. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation.
See the Pen HTML5 Drag And Drop API by iqq800 (@iqq800) on CodePen.
The Best Drag and Drop Plugin?
Originally Published Nov 13 2019, updated Feb 20 2023
Table of contents:
jQuery Drag And Drop Plugins:
Easy and Touch-enabled jQuery Draggable Obeject Plugin - pep.js
A simple, cross browser and mobile-friendly jQuery plugin used to enable draggable functionality on any DOM element. The plugin allows to move any object by clicking or touching on it and dragging it anywhere within the viewport. Pep.js also comes with a lot of options and APIs that could fit to a wide range of design purposes.
Touch-compatible jQuery Drad and Drop Plugin - Dragmove
A jQuery plugin that allows you to drag and move any DOM elements with either the mouse or touch events.
Easy Drag and Drop Plugin For jQuery - dad.js
A simple and easy-to-use jQuery plugin which enables drag and drop functionality on a group of DOM elements with just one JS call.
jQuery Plugin For Draggable HTML Elements - Udraggable
A jQuery plugin that provides an API similar to jQuery UI's draggable but with support for unified mouse and touch events. The plugin allows to make any html elements draggable by mouse or touch events based on Michael S. Mikowski's jquery.event.ue unified event plugin.
Lightweight JS Sorting Library with Native HTML5 Drag and Drop – SortableJS
Touch-enabled Draggable & Sortable Library – draggable.js
Create Draggable/Resizable/Scalable/Rotatable/Warpable Element – moveable
Lightweigt HTML5 Drag And Drop Sortable Library – html5sortable
- 7 Best Vue.js Drag And Drop Components To Create Draggable Elements
- 10 Best Drag And Drop Components For React & React Native