midoriDragDrop

You can make any element on a page draggable with the mouse by using midoriDragDrop. You can also define drop targets, and even use custom drop callback functions to modify the drop behavior. The default drop behavior is list sorting.

midoriDragDrop(containerId, dropCallback)

Adds drag & drop support to page elements.

containerId is the id of element that contains draggable items. The draggable elements must have the class 'draggable'.

dropCallback is optional. The default drop callback function allows list sorting.

Example:

Apple
Orange
Banana

midori.addEventListener(window, 'ready', function (e) {
   myList = new midoriDragDrop('my-list');
} );

midoriDragDrop uses two classes to define the appearance of the draggable items: 'draggable' and 'midori-dd-spacer'. Here is the CSS definitions and HTML code used for the above example:

<style type="text/css">
   .draggable        { cursor: move; }

   .item             {
      width: 200px; padding: 4px; border: 1px solid #DDD;
      background-color: #EEE; }

   .midori-dd-spacer {
      width: 200px; padding: 0px 4px 0px 4px;
      border: 1px dotted #BBB; }
</style>
   
<ul id="my-list">
   <li class="draggable item">Apple</li>
   <li class="draggable item">Orange</li>
   <li class="draggable item">Banana</li>
</ul>

Defining Drop Targets:

If you just need list sorting, there is no need to define a drop target, but if you need an area to which you can drag and drop items, you can simply add the draggable drop-target class to the corresponding page element.

Example:

You can drag and drop items between these two areas:

Apple

Orange

Banana

Here is the code for the above example including style definitions:

<style type="text/css">
   .draggable        { cursor: move; }

   .item             {
      width: 200px; padding: 4px; border: 1px solid #DDD;
      background-color: #EEE; }

   .midori-dd-spacer {
      width: 200px; padding: 0px 4px 0px 4px;
      border: 1px dotted #BBB; }

   .area             {
      width: 45%; height: 100px; float: left; background-color: #CCC;
      border: 1px solid #BBB; padding: 5px; margin-left: 10px; }
</style>

<div id="my-drop-areas">
   <div class="draggable drop-target area">
      <div class="draggable item">Apple</div>
      <div class="draggable item">Orange</div>
      <div class="draggable item">Banana</div>
   </div>
   <div class="draggable drop-target area"></div>

<script type="text/javascript">
   midori.addEventListener(window, 'ready', function (e) {
      myDropAreas = new midoriDragDrop('my-drop-areas');
   } );
</script>

Defining your Own Drop Callback Functions:

The default drop callback function has the following code:

function (o, dragged, spacer)
{
   if (/drop-target/.test(o.obj.className))
      return o.obj.appendChild(spacer ? spacer : dragged);

   return (o.where == 'next' && !o.obj.nextSibling) ?
      o.obj.parentNode.appendChild( spacer ? spacer : dragged) :
      o.obj.parentNode.insertBefore(spacer ? spacer : dragged,
         (o.where == 'prev') ? o.obj : o.obj.nextSibling);
}

o contains information about the draggable element over which the currently dragged element is moved to, and has the following members:

obj is a reference to the DOM object.
x is the x coordinate of the object.
y is the y coordinate of the object.
width is the width of the object in pixels.
height is the height of the object in pixels.
where can be either 'prev' or 'next' depending on the position of the dragged element to the object. If the object has the float property set, the position is calculated horizontally, otherwise vertically.

dragged is the dragged element.

spacer is the spacer element used to mark the place the dragged element will be dropped.

Important Note:

if you add or remove items from the drag & drop container, you need to call init() to register your changes. For example, myDropAreas.init().