FancySortable takes three parameters, the parent element (or id), a selector for each item (relative to the parent), and an optional options object.
The basic use case: A list of elements exist in on the page contained by a parent element.
<div id='listwrap'> <div class='listitem'>The Shawshank Redemption (1994)</div> <div class='listitem'>The Godfather (1972)</div> ... </div>
The list would then be made sortable with this:
new FancySortable('listwrap', '.listitem');
Using a handle: Similar to above, but adding a handle element...
<div id='listwrap'> <div class='listitem'><div class='handle'></div>The Shawshank Redemption (1994)</div> <div class='listitem'><div class='handle'></div>The Godfather (1972)</div> ... </div>
The call would now be:
new FancySortable('listwrap', '.listitem', {'handleSelector':'.handle'});
Or to do something on the sort event:
new FancySortable('listwrap', '.listitem', { 'handleSelector':'.handle', 'onSort': function(list, item, i, ind) { console.log('item moved from '+ind+' to '+i, item); } });
See: http://jsfiddle.net/auzz/yXTfv/
The following events are roughly analogous to events passed from Drag.Move, and allow one to use other 'droppable' elements besides re-ordering.
Supported listen events
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus