Easy Drag and Drop Plugin For jQuery - dad.js

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.