A simple and awesome Drag And Drop plugin!
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
|---|---|---|---|---|
| IE11, Edge | last version | last version | last version | last version |
Import dad plugin file after jquery.
<script src='jquery.min.js'></script>
<script src='jquery.dad.min.js'></script>
and that's it!
Create a group of DOM elements that can be resorted via drag and drop inside the parent container 'demo'.
<div class="my-container">
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
and just call it:
$('.my-container').dad();
The options allow you to better customize your drag and drop implementation by passing a JSON object when calling dad plugin. See below all options in details:
Type: boolean
Default value: false
Description:
Setting it to false prevents the containers to start dragging. You can check if a container is enabled or disabled by the attribute data-dad-active or using the instance like:
var instance = $(".my-container").dad({ active: false });
console.log(instance.active); // prints false
Type: string(selector) | false
Default value: false
Description:
Passing a selector restricts the drag to start only when the element from the given selector is clicked within the child element.
If false fallsback to the target child element.
// the drag will only start when mouse is hovering .my-drag-selector
var instance = $(".my-container").dad({
draggable: ".my-drag-selector"
});
Type: boolean
Default value: true
Description:
Allows containers of the same type (called with the same .dad call) to exchange children.
Type: number
Default value: 200
Description:
Transition time in ms of the drop animation
Type: string(selector) | false
Default value: false
Description:
The target element within the current child to be covered by the placeholder.
Type: string(selector)
Default value: <div />
Description:
Enable the full customization of the placeholder by passing a HTML string. E.g.
$(".my-container").dad({
placeholderTemplate: "<div style=\"border: 1px dashed black\">i'm a placeholder</div>"
})
Type: string(selector)
Default value: dad-clone
Description:
This is a helper class added to the clone element.
$(".my-container").dad({
cloneClass: "another-clone-class"
})
Type: string(selector)
Default value: dad-target
Description:
This is a helper class added to the target element.
// javascript
$(".my-container").dad({
targetClass: "another-target-class"
})
Type: string(selector)
Default value: dad-placeholder
Description:
This is a helpers class added to the placeholder element.
$(".my-container").dad({
targetClass: "another-target-class"
})
You can add those cool dashed borders like:
.dad-placeholder {
border: 4px dashed #639bf6;
}
Methods allow you to control your container from Dad's class instance. See below:
Set the container's active state to true
var instance = $('.my-container').dad();
instance.activate();
Set the container's active state to false
var instance = $('.my-container').dad();
instance.deactivate();
Events are provided to handle the drag and drop actions such as drag start, drag end, drop... See below:
Event triggered when user starts dragging an element.
$(".my-container").on("dadDragStart", function (e, targetElement) {
// do your thing here
})
Event triggered when the current dragged element has its position updated.
$(".my-container").on("dadDragUpdate", function (e, targetElement) {
// do your thing here
})
Event triggered when the containers exchange children.
$(".my-container").on("dadDragExchange", function (e, sourceContainer, targetContainer) {
// do your thing here
})
Event triggered when user drops an element, this event is triggered before the dropping animation.
$(".my-container").on("dadDragEnd", function (e, targetElement) {
// do your thing here
})
Event triggered when the element is dropped, this event is triggered after the dropping animation.
$(".my-container").on("dadDrop", function (e, droppedElement) {
// do your thing here
})
Check the demos at plugin website