Scriptaculous
JavaScript DHTML
-
Home
-
JavaScript DHTML
-
Scriptaculous
- Sortable with ghosting effects
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
script.aculo.us Sortable ghosting functional test file
script.aculo.us Sortable ghosting functional test file
Ghosting
Lorem ipsum dolor
sit amet
consectetur adipisicing
elit
sed do eiusmod
tempor incididunt
ut labore et dolore
magna aliqua
(waiting for onChange)
Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over',
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
No ghosting
Lorem ipsum dolor
sit amet
consectetur adipisicing
elit
sed do eiusmod
tempor incididunt
ut labore et dolore
magna aliqua
(waiting for onChange)
Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over',
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist2_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
Ghosting (inside position:relative container)
Lorem ipsum dolor
sit amet
consectetur adipisicing
elit
sed do eiusmod
tempor incididunt
ut labore et dolore
magna aliqua
(waiting for onChange)
Sortable.create('testlist3',{ghosting:true,constraint:false,
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist3_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
Ghosting (inside position:relative container)
Lorem ipsum dolor
sit amet
consectetur adipisicing
elit
sed do eiusmod
tempor incididunt
ut labore et dolore
magna aliqua
(waiting for onChange)
Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false,
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist4_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});