Simple jQuery & Html5 Drag and Drop Plugin - DD

A lightweight and customizable jQuery drag'n'drop library which allows you to move Html elements from a container to another.

How to use it:

1. Include jQuery library and the jQuery DD plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dd.js"></script>

2. Create the source container with data-dd="source" attribute. Add the data-dd-status="fixed" attribute to the Html elements which you wish to make them undraggable.

<div id="ddsource" data-dd="source">
  <div data-dd-status="fixed">Source</div>
  <div class="example-element">Element 1</div>
  <div class="example-element">Element 2</div>
  <div class="example-element">Element 3</div>
  ...
</div>

3. Create the destination container with data-dd="target" and data-dd-reordable="true" attributes.

<div id="ddtarget" data-dd="target" data-dd-reordable="true">
  <div data-dd-status="fixed">Targets</div>
  <div class="example-element">Element 4</div>
  <div class="example-element">Element 5</div>
</div>

4. Style the draggable elements and containers in CSS.

#ddsource,
#ddtarget {
  ...
}

.example-element {
  ...
}

---

This awesome jQuery plugin is developed by Choko256. For more Advanced Usages, please check the demo page or visit the official website.