Collection view for Backbone and JQuery
This library provides a generic, reusable view which provides:
- Automatic management of item views
- Reordering using mouse dragging
Currently only vertical dragging is supported. Future plans include horizontal and hierarchical dragging and HTML5 drag/drop.
There are some examples in the
examples directory. Basically:
Backbone.JQuery.CollectionViewand override the
createSubview()method to return a view that corresponds to each model in the collection.
- Instantiate the collection view with a hash of options.
render()on the view.
- Provide CSS for dragging and dropping.
When instantiating the collection view, the following option is required:
collection: This must be the collection that the view will be backed by.
dragTolerance: The number of pixels that the mouse must be moved before the view interprets the action as a dragging movement.
scrollTolerance: The number of pixels that the mouse must be within the edge of the window in order to trigger scrolling when dragging.
draggingClass: Class name to add to item views when dragging. Defaults to
dropMarkerClass: Class name to add to drop marker element that indicates where an item will be placed. Defaults to
positionAttribute: Name of attribute that has the ordinal position of each item. If this is specified, this attribute is maintained, and it is assumed that the collection has a similar comparator that uses the attribute. Otherwise, it is assumed that the collection is not automatically sorted, and dragging items in the view will simply rearrange the collection's contents.
dragConstrainX: If true, dragging will be constrained to the Y axis only.
showPlaceholder: If true, while dragging, leave a blank area where the dragged item was. Defaults to true.
There are two CSS aspects that might need to be provided:
- The drag class. (Specified with the
draggingClassoption.) This class is added to the item view's element when it is being dragged.
- The drop marker class. (Specified with
dropMarkerClassoption.) When dragging an item, an indicator element is placed that highlights where the item will be dropped.
- Backbone: http://documentcloud.github.com/backbone/
- Underscore: http://documentcloud.github.com/underscore/
- JQuery: http://jquery.com/
The code uses the MIT license. See the file