Permalink
Browse files

Allow drop marker class to be overridden.

  • Loading branch information...
Alexander Staubo
Alexander Staubo committed Jul 26, 2011
1 parent e5b8955 commit 51ad08e142e758aa5819e07bed996574de2148db
Showing with 9 additions and 1 deletion.
  1. +7 −0 README.md
  2. +2 −1 jquery_collection_view.js
View
@@ -16,6 +16,7 @@ There are some examples in the `examples` directory. Basically:
* Subclass `Backbone.JQuery.CollectionView` and 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.
* Call `render()` on the view.
+* Provide CSS for dragging and dropping.
When instantiating the collection view, the following option is required:
@@ -26,10 +27,16 @@ Optional options:
* `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 `dragging`.
+* `dropMarkerClass`: Class name to add to drop marker element that indicates where an item will be placed. Defaults to `drop_marker`.
* `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 `draggingClass` option.) This class is added to the item view's element when it is being dragged.
+* The drop marker class. (Specified with `dropMarkerClass` option.) When dragging an item, an indicator element is placed that highlights where the item will be dropped.
+
Requirements
------------
@@ -12,6 +12,7 @@ Backbone.JQuery.CollectionView = Backbone.View.extend({
this.positionAttribute = options.positionAttribute;
this.dragConstrainX = options.dragConstrainX || false;
this.showPlaceholder = options.showPlaceholder || true;
+ this.dropMarkerClass = options.dropMarkerClass || 'drop_marker';
this._subviews = [];
this._dragState = null;
@@ -194,7 +195,7 @@ Backbone.JQuery.CollectionView = Backbone.View.extend({
if (this._dropTargetView != view && this._dropTargetView != previousView) {
if (!this._dropMarkerElement) {
this._dropMarkerElement = $('<div></div>').
- addClass('drop_marker').
+ addClass(this.dropMarkerClass).
css('position', 'absolute').
css('left', $(this._placeholderElement).offset().left + 'px').
css('width', $(this._placeholderElement).width() + 'px');

0 comments on commit 51ad08e

Please sign in to comment.