Drag and Drop

To make an element draggable just say:
new Draggable('drag',{revert: true});
Other options include: snap, zindex, constraint (horizontal or vertical), ghosting.
A droppable container can be created with:
Droppables.add('drop', {accept: 'dragme', hoverclass: 'highlight'});

Sortable lets you sort lists:

Sortable.create("firstlist",
  {dropOnEmpty:true,
   containment:["firstlist","secondlist"],
   constraint:false});
Sortable.create("secondlist",
  {dropOnEmpty:true,
   handle:'handle',
   containment:["firstlist","secondlist"],
   constraint:false});

This is the first list

Item 1 from first list.
Item 2 from first list.
Item 3 from first list.

And now the second list

HANDLE Item 1 from second list.
HANDLE Item 2 from second list.
HANDLE Item 3 from second list.

A slider can be set up with:

<div id="track1" style="width: 400px; 
                        background-color: rgb(170, 170, 170); 
                        height: 5px;">
<div id="handle1" class="selected" 
  style="width: 10px; height: 10px; background-color: rgb(255, 0, 0); 
                                   cursor: move; 
                                   left: 0px; 
                                   position: relative;"/>
</div>
<div id="debug1" style="padding-top: 5px;"></div>

    new Control.Slider('handle1','track1',{
        onSlide:function(v){$('debug1').innerHTML='slide: '+v},
        onChange:function(v){$('debug1').innerHTML='changed! '+v}});

José M. Vidal .

7 of 9