Determine the correct target before onFilter

Fix #156 and also returning correct indexes if a drag handle is present (#154).

README.md

@@ -86,6 +86,7 @@ var sortable = new Sortable(el, {
 		// same properties as onUpdate
 	},
 
+	// Attempt to drag a filtered element
 	onFilter: function (/**Event*/evt) {
 		var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
 	}
@@ -187,12 +188,12 @@ For each element in the set, get the first element that matches the selector by
 var editableList = new Sortable(list, {
 	filter: ".js-remove, .js-edit",
 	onFilter: function (evt) {
-		var el = editableList.closest(evt.item); // list item
+		var el = editableList.closest(evt.target);  // list item
 
-		if (editableList.closest(evt.item, ".js-remove")) { // Click on remove button
+		if (editableList.closest(evt.item, ".js-remove")) {  // Click on remove button
 			el.parentNode.removeChild(el); // remove sortable item
 		}
-		else if (editableList.closest(evt.item, ".js-edit")) { // Click on edit link
+		else if (editableList.closest(evt.item, ".js-edit")) {  // Click on edit link
 			// ...
 		}
 	}

Sortable.js

@@ -162,21 +162,28 @@
 		_onTapStart: function (/**Event|TouchEvent*/evt) {
 			var touch = evt.touches && evt.touches[0],
 				target = (touch || evt).target,
+				originalTarget = target,
 				options =  this.options,
 				el = this.el,
 				filter = options.filter;
 
-			// get the index of the dragged element within its parent
-			startIndex = _index(target);
-
 			if (evt.type === 'mousedown' && evt.button !== 0 || options.disabled) {
 				return; // only left button or enabled
 			}
 
+			if (options.handle) {
+				target = _closest(target, options.handle, el);
+			}
+
+			target = _closest(target, options.draggable, el);
+
+			// get the index of the dragged element within its parent
+			startIndex = _index(target);
+
 			// Check filter
 			if (typeof filter === 'function') {
 				if (filter.call(this, target, this)) {
-					_dispatchEvent(el, 'filter', target);
+					_dispatchEvent(el, 'filter', target, undefined, startIndex);
 					return; // cancel dnd
 				}
 			}
@@ -186,17 +193,11 @@
 				});
 
 				if (filter.length) {
-					_dispatchEvent(el, 'filter', target);
+					_dispatchEvent(originalTarget, 'filter', target, undefined, startIndex);
 					return; // cancel dnd
 				}
 			}
 
-			if (options.handle) {
-				target = _closest(target, options.handle, el);
-			}
-
-			target = _closest(target, options.draggable, el);
-
 			// IE 9 Support
 			if (target && evt.type == 'selectstart') {
 				if (target.tagName != 'A' && target.tagName != 'IMG') {
@@ -695,7 +696,7 @@
 	}
 
 
-	function _globalDragOver(evt) {
+	function _globalDragOver(/**Event*/evt) {
 		evt.dataTransfer.dropEffect = 'move';
 		evt.preventDefault();
 	}
@@ -804,11 +805,12 @@
 	/**
 	 * Returns the index of an element within its parent
 	 * @param el
-	 * @returns {HTMLElement}
+	 * @returns {number}
+	 * @private
 	 */
 	function _index(/**HTMLElement*/el) {
 		var index = 0;
-		while ((el = el.previousElementSibling)) {
+		while (el && (el = el.previousElementSibling)) {
 			index++;
 		}
 		return index;