From 81748a58284d5825ad0779e51bb402072104cee0 Mon Sep 17 00:00:00 2001
From: Dan Dascalescu <ddascalescu+github@gmail.com>
Date: Mon, 8 Dec 2014 00:10:56 -0800
Subject: [PATCH] Determine the correct target before onFilter

Fix #156 and also returning correct indexes if a drag handle is present (#154).
---
 README.md   |  7 ++++---
 Sortable.js | 30 ++++++++++++++++--------------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 9c27680..cb315c4 100644
--- a/README.md
+++ b/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
 			// ...
 		}
 	}
diff --git a/Sortable.js b/Sortable.js
index f4f30d4..05cbf62 100644
--- a/Sortable.js
+++ b/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;