Friday, June 10th, 2005

JavaScript Drag-and-Drop extension for Prototype

Category: JavaScript, Library, Prototype, Ruby

Thomas Fuchs has released a Drag-and-Drop extension for Prototype.

Generic drag-and-drop

  • Any element can be declared draggable and/or a drop target
  • Callbacks (onDrop, onHover)
  • Integrated CSS class change to add class drophover if hovering over a possible drop-target
  • Constraints (drag only vertically or horizontally)
  • Uses the Effect2 library for transparency and snap-back visual effects

Sortable lists (UL, OL)

  • Sortable float containers (DIV containing any sort of floating elements)
  • Callbacks for sortables (onChange, onUpdate)
  • Easy to do sortable lists that also can drag-and-drop to another list
  • Sort order can be serialized to use with Prototype’s Ajax functions

Works with

  • Safari 2.0; Firefox 1.03, 1.04, DP 1.1; Internet Explorer 6.0; Opera 8.

View simple Draggables and Droppables for Prototype, and sortable floats and lists

The code to do this work is made pretty simple:

Sortable.create('floating-images', {tag: 'div', overlap: 'horizontal', constraint: false});
  
Sortable.create('firstlist',{containment:['firstlist','secondlist'],
    onUpdate:function(element){alert('The first list was affected during the last drag.')}});
  
Sortable.create('secondlist',{containment:['firstlist','secondlist'],
    onUpdate:function(element){alert('The second list was affected during the last drag.')}});

And you can allow serialization of the list:

<ul id="mylist">
   <li id="mylist_1">asldjkflk</li>
   <li id="mylist_2">weoiowe</li>
</ul>
 
Sortable.serialize('mylist',{tag:'li',name:'mylist'});

Posted by Dion Almaer at 12:14 am
1 Comment

+++--
3.7 rating from 90 votes

1 Comment »

Comments feed

invalid link

Comment by Sidharta, Robby — April 21, 2007

Leave a comment

You must be logged in to post a comment.