Friday, June 10th, 2005
JavaScript Drag-and-Drop extension for Prototype
Category: JavaScript, Library
, Prototype
, Ruby
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'});
Related Content:
3.7 rating from 84 votes
invalid link