midoriDragDrop

You can make any element on a page draggable with the mouse by using midoriDragDrop. With custom drop callback functions, you can define drop targets or create custom sortable lists. 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) {
   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 your Own Drop Callback Functions:
The default drop callback function has the following code:
```
function (o, dragged, spacer)
{
   return (o.where == 'next' && !o.obj.parentNode.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.