#156: * filter-method

README.md

@@ -136,6 +136,29 @@ You can also define whether lists can give away, give and keep a copy (`clone`),
 ---
 
 
+#### `filter` option
+
+
+```js
+Sortable.create(list, {
+	filter: ".js-remove, .js-edit",
+	onFilter: function (evt) {
+		var item = el.item;
+
+		if (Sortable.utils.is(evt.target, ".js-remove")) {  // Click on remove button
+			el.parentNode.removeChild(el); // remove sortable item
+		}
+		else if (Sortable.utils.is(evt.target, ".js-edit")) {  // Click on edit link
+			// ...
+		}
+	}
+})
+```
+
+
+---
+
+
 <a name="ng"></a>
 ### Support AngularJS
 Include [ng-sortable.js](ng-sortable.js)
@@ -184,22 +207,6 @@ Get or set the option.
 ##### closest(el:`String`[, selector:`HTMLElement`]):`HTMLElement|null`
 For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
 
-```js
-var editableList = new Sortable(list, {
-	filter: ".js-remove, .js-edit",
-	onFilter: function (evt) {
-		var el = editableList.closest(evt.target);  // list item
-
-		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
-			// ...
-		}
-	}
-})
-```
-
 
 ##### toArray():`String[]`
 Serializes the sortable's item `data-id`'s into an array of string.

Sortable.js

@@ -182,18 +182,22 @@
 
 			// Check filter
 			if (typeof filter === 'function') {
-				if (filter.call(this, target, this)) {
-					_dispatchEvent(el, 'filter', target, undefined, startIndex);
+				if (filter.call(this, evt, target, this)) {
+					_dispatchEvent(originalTarget, 'filter', target, el, startIndex);
 					return; // cancel dnd
 				}
 			}
 			else if (filter) {
-				filter = filter.split(',').filter(function (criteria) {
-					return _closest(target, criteria.trim(), el);
+				filter = filter.split(',').some(function (criteria) {
+					criteria = _closest(originalTarget, criteria.trim(), el);
+
+					if (criteria) {
+						_dispatchEvent(criteria, 'filter', target, el, startIndex);
+						return true;
+					}
 				});
 
 				if (filter.length) {
-					_dispatchEvent(originalTarget, 'filter', target, undefined, startIndex);
 					return; // cancel dnd
 				}
 			}
@@ -670,7 +674,7 @@
 	}
 
 
-	function _closest(el, selector, ctx) {
+	function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) {
 		if (selector === '*') {
 			return el;
 		}
@@ -823,6 +827,9 @@
 		css: _css,
 		find: _find,
 		bind: _bind,
+		is: function (el, selector) {
+			return !!_closest(el, selector, el);
+		},
 		closest: _closest,
 		toggleClass: _toggleClass,
 		dispatchEvent: _dispatchEvent,

index.html

@@ -276,7 +276,7 @@ var editableList = new Sortable(editable, {
 			}
 
 
-			new Sortable(foo, {
+			Sortable.create(foo, {
 				group: "words",
 				animation: 150,
 				store: {
@@ -297,7 +297,7 @@ var editableList = new Sortable(editable, {
 			});
 
 
-			new Sortable(bar, {
+			Sortable.create(bar, {
 				group: "words",
 				animation: 150,
 				onAdd: function (evt){ console.log('onAdd.bar:', evt.item); },
@@ -308,19 +308,18 @@ var editableList = new Sortable(editable, {
 			});
 
 
-			new Sortable(multi, {
+			Sortable.create(multi, {
 				animation: 150,
 				draggable: '.tile',
 				handle: '.tile__name'
 			});
 
 
-			var editableList = new Sortable(editable, {
+			var editableList = Sortable.create(editable, {
 				animation: 150,
 				filter: '.js-remove',
 				onFilter: function (evt) {
-					var el = editableList.closest(evt.item);
-					el && el.parentNode.removeChild(el);
+					evt.item.parentNode.removeChild(evt.item);
 				}
 			});
 
@@ -338,7 +337,7 @@ var editableList = new Sortable(editable, {
 
 
 			[].forEach.call(multi.getElementsByClassName('tile__list'), function (el){
-				new Sortable(el, {
+				Sortable.create(el, {
 					group: 'photo',
 					animation: 150
 				});
@@ -359,14 +358,14 @@ var editableList = new Sortable(editable, {
 				pull: false,
 				put: true
 			}].forEach(function (groupOpts, i) {
-				new Sortable(document.getElementById('advanced-' + (i + 1)), {
+				Sortable.create(document.getElementById('advanced-' + (i + 1)), {
 					sort: (i != 1),
 					group: groupOpts,
 					animation: 150
 				});
 			});
 
-			new Sortable(document.getElementById('handle-1'), {
+			Sortable.create(document.getElementById('handle-1'), {
 				handle: '.drag-handle',
 				animation: 150
 			});