Performant Drag And Drop JavaScript Library - Draggabilly
Briefly

Performant Drag And Drop JavaScript Library - Draggabilly
"Draggabilly is a jQuery & Vanilla JavaScript plugin that provides an advanced, performant, smooth, touch-friendly Draggable functionality on any DOM element. More features: Moves elements within its parent container. Snaps the draggable element to a grid. Custom drag handle. Allows you to style the draggable element when dragging. How to use it: 1. Install & download the package."
"2. Load the Draggabilly library in the html document. <!-- As A Vanilla JavaScript Plugin --> <script src="/path/to/dist/draggabilly.pkgd.min.js"></script> <!-- Or From A CDN --> <script src="https://unpkg.com/draggabilly/dist/draggabilly.pkgd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/draggabilly/draggabilly.min.js"></script> <!-- As A jQuery Plugin --> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/draggabilly.pkgd.min.js"></script> 3. Attach the function to the element to be draggable. Done. <div class="draggable"></div> // As A Vanilla JavaScript Plugin var draggable = new Draggabilly('.draggable'); // As A jQuery Plugin var $draggable = $('.draggable').draggabilly();"
Draggabilly enables draggable interactions for DOM elements in both vanilla JavaScript and jQuery. The plugin supports containment within a parent container, grid snapping, custom drag handles, and CSS classes for pointer-down and dragging states for visual feedback. Installation is available via npm or by including the packaged script directly or from a CDN. Initialization works by creating a new Draggabilly instance or by calling .draggabilly() on a jQuery selection. Configuration options include containment: true and axis: 'x' to restrict movement. The plugin targets touch-friendly, smooth, and performant drag behavior across devices.
Read at jQuery Script
Unable to calculate read time
[
|
]