jquery.dad.js

DAD: A simple and awesome Drag And Drop plugin!

1.Installation

Insert the basic css file:

<link rel="stylesheet" href="jquery.dad.css"> 

And the dad plugin file after jquery.

<script src='jquery.min.js'></script> <script src='jquery.dad.js'></script> 

2.Usage

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> 

and just call it:

$(function(){    $('.demo').dad(options); })  

3.Options

You can call options width a JSON object.

• target: '.selector';
• draggable: '.selector' from the target child div.
• callback: function(e){} where e is the jquery object for the dropped element
• placeholder: string with the placeholder text on draggable area

4.Functions

• n.addDropzone(selector,function(e){}); Sample:

var n=$('.demo').dad(); n.addDropzone('.dropzone',function(e){   console.log(e); //e is the jquery object for the dropped element }) 

• n.activate()

var n=$('.demo').dad(); n.activate(); 

• n.deactivate()

var n=$('.demo').dad(); n.deactivate(); 

For more info visit the plugin website