Easy Drag and Drop Plugin For jQuery - dad.js
File Size: | 138 KB |
---|---|
Views Total: | 6838 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

dad.js is 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. Without requiring the jQuery UI library and compatible with Bootstrap grid layout.
How to use it:
1. Include the required stylesheet for basic CSS styles.
<link rel="stylesheet" href="jquery.dad.css">
2. Create a group of DOM elements that can be resorted via drag and drop inside the parent container 'demo'.
<div class="demo"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div>
3. Add jQuery library and the jQuery dad.js script to the bottom of your web page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.dad.js"></script>
4. Just call the function on the parent element we just created and done.
$('#demo').dad();
5. Available options to customize the drag and drop plugin.
$('#demo').dad({ // activate the drop and drop plugin active: true, // custom drag handle // e.g. '.my-drag-selector' draggable: false, // allows to exchange children. exchangeable: true, // target placeholder element placeholderTarget: false, // placeholder template placeholderTemplate: "<div />", // default CSS classes placeholderClass: "dad-placeholder", targetClass: "dad-target", cloneClass: "dad-clone", // transition time in ms transition: 200 });
6. Activate & disable the drag and drop functionality.
instance.activate(); instance.deactivate();
7. Available event handlers.
$('#demo').on("dadDragStart", function (e, targetElement) { // do something }) $('#demo').on("onDadUpdate", function (e, targetElement) { // do something }) $('#demo').on("dadDragExchange", function (e, targetElement) { // do something }) $('#demo').on("dadDragEnd", function (e, targetElement) { // do something }) $('#demo').on("dadDrop", function (e, targetElement) { // do something })
Changelog:
v2.0.3 (2020-11-25)
- Fix scrolling issue
v2.0.2 (2020-07-27)
- Add events for lifecycles
- Add custom classes
v2.0.1 (2020-07-26)
- Fix strict mode issue
2016-09-12
- code refactoring
- added touch support
2015-05-13
- Firefox bug fix
2015-05-10
- Dynamic added elements support fix
2015-05-09
- added draggable area selection
2015-05-05
- add a return to activate and deactivate functions
This awesome jQuery plugin is developed by williammustaffa. For more Advanced Usages, please check the demo page or visit the official website.