schartier/angular-sortable — pull request #1 by andrezero (2014-06-03 14:16:58+00:00)
Title: new directive options(selectors, zindex, disable); track active element ...

Hi @schartier

Congrats on your great work on this sortable.

After a couple of days playing with it we decided we need to go another direction and will need to start from scratch, but here's our humble contribution (a bit biased by our own needs). Maybe you can make something of it and backport some good stuff.

fixed:
- `$scope.$watch('sortable.length', function () {` becomes `$scope.$watch('ngSortable.length', function () {`

fixed:
- detecting `event.target` and overriding it to be the element in the list, not some child

fixed:
- using array splice to modify the items instead of swapping (was swapping first with last if user dragged around the list)

added to directive options:
- ngSortableItems: '@', // selector
- ngSortableHandles: '@', // selector, restrict dragstart to a specific handle inside each item
- ngSortableZindex: '@', // added programatically to cloned item
- ngSortableDisable: '=', // exploratory, not quite tested yet

added Sortable options:
- handles: null,
- zindex: '9000'

added to Sortable interface
- enable(enabled)

adding unselectable to draggable items
caching body unselectable original value to reset to that value when drag ends

bailing out dragstart if event.target is not the handle (if `handles` option is set)
- marking all handles with a css class in order to be able to detect them on drag start with `closest()` regardless of the client selector
- tried to bind dragstart to `this.handleSelector` (`handle` selector if set, fallback to `items` if not) but it did not
work because when `refresh()` kicks in the `ng-repeat` has the right number of elements, but the child nodes are not
rendered yet

cloning also the css classes when cloning the element

because we have lists that ng-repeat=`item in sequence track by $index`
- caching index of dragging element at dragstart
- comparing current element by index `if (ix === context.draggingIdx) {`

triggering event after updating classes

wrapped detection/trigger change code in a debounce function
- @todo configure debounceMs magic number
- @todo unfugligy passising `context` as explicit variable to the `detect()` function

added css class map to improve minification
- removed `element-` from all css classes
- added a "markeer" class `sortable-item` added to all items on refresh (but removed form the drag clone)
- disambiguated 'sortable-sorting' and `sortable-activeitem`
- marking the dragitem with `sortable-clone`
- marking the currently sorting original with `sortable-activeitem`

also added a couple of css lines for utility classes to use inside the elements
- `sortable-initial` - displayed initially, hidden in the clone
- `sortable-state` - hidden initially, displayed in the clone

renamed all `element` to `item` in code except for the actual directive element