v0.5.0: filter/onFilter

README.md

@@ -33,27 +33,27 @@ new Sortable(el, {
 	group: "name",
 	store: null, // @see Store
 	handle: ".my-handle", // Restricts sort start click/touch to the specified element
+	filter: ".ignor-elements", // Selectors that do not lead to dragging (String or Function)
 	draggable: ".item",   // Specifies which items inside the element should be sortable
 	ghostClass: "sortable-ghost",
 	
-	onStart: function (/**Event*/evt) { // dragging
-		var itemEl = evt.item;
-	},
-
-	onEnd: function (/**Event*/evt) { // dragging
-		var itemEl = evt.item;
-	},
+	onStart: function (/**Event*/evt) { /* dragging */ },
+	onEnd: function (/**Event*/evt) { /* dragging */ },
 
 	onAdd: function (/**Event*/evt){
-		var itemEl = evt.item;
+		var itemEl = evt.item; // dragged HTMLElement
 	},
 
 	onUpdate: function (/**Event*/evt){
-		var itemEl = evt.item; // the current dragged HTMLElement
+		var itemEl = evt.item; // dragged HTMLElement
 	},
 
 	onRemove: function (/**Event*/evt){
-		var itemEl = evt.item;
+		var itemEl = evt.item; // dragged HTMLElement
+	},
+
+	onFilter: function (/**Event*/evt){
+		var itemEl = evt.item; // HTMLElement on which was `nousedown|tapstart` event.
 	}
 });
 ```
@@ -63,8 +63,28 @@ new Sortable(el, {
 
 ### Method
 
+##### 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.item); // 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.
+Serializes the sortable's item `data-id`'s into an array of string.
 
 
 ##### sort(order:`String[]`)
@@ -84,6 +104,14 @@ sortable.sort(order.reverse()); // apply
 ### Store
 Saving and restoring of the sort.
 
+```html
+<ul>
+	<li data-id="1">order</li>
+	<li data-id="2">save</li>
+	<li data-id="3">restore</li>
+</ul>
+```
+
 ```js
 new Sortable(el, {
 	group: "localStorage-example",

Sortable.js

@@ -51,6 +51,12 @@
 			return evt;
 		}
 
+		, _dispatchEvent = function (rootEl, name, targetEl) {
+			rootEl.dispatchEvent(_createEvent(name, targetEl || rootEl));
+		}
+
+		, _customEvents = 'onAdd onUpdate onRemove onStart onEnd onFilter'.split(' ')
+
 		, noop = function (){}
 		, slice = [].slice
 
@@ -70,17 +76,26 @@
 
 
 		// Defaults
-		options.group = options.group || Math.random();
-		options.store = options.store || null;
-		options.handle = options.handle || null;
-		options.draggable = options.draggable || el.children[0] && el.children[0].nodeName || (/[uo]l/i.test(el.nodeName) ? 'li' : '*');
-		options.ghostClass = options.ghostClass || 'sortable-ghost';
-		options.ignore = options.ignore || 'a, img';
+		var defaults = {
+			group: Math.random(),
+			store: null,
+			handle: null,
+			draggable: el.children[0] && el.children[0].nodeName || (/[uo]l/i.test(el.nodeName) ? 'li' : '*'),
+			ghostClass: 'sortable-ghost',
+			ignore: 'a, img',
+			filter: null
+		};
+
+		// Set default options
+		for (var name in defaults) {
+			options[name] = options[name] || defaults[name];
+		}
 
 
 		// Define events
-		'onAdd onUpdate onRemove onStart onEnd'.split(' ').forEach(function (name) {
+		_customEvents.forEach(function (name) {
 			options[name] = _bind(this, options[name] || noop);
+			_on(el, name.substr(2).toLowerCase(), options[name]);
 		});
 
 
@@ -97,12 +112,6 @@
 
 
 		// Bind events
-		_on(el, 'add', options.onAdd);
-		_on(el, 'update', options.onUpdate);
-		_on(el, 'remove', options.onRemove);
-		_on(el, 'start', options.onStart);
-		_on(el, 'stop', options.onEnd);
-
 		_on(el, 'mousedown', this._onTapStart);
 		_on(el, 'touchstart', this._onTapStart);
 		supportIEdnd && _on(el, 'selectstart', this._onTapStart);
@@ -132,8 +141,25 @@
 				, target = (touch || evt).target
 				, options =  this.options
 				, el = this.el
+				, filter = options.filter
 			;
 
+			// Check filter
+			if( typeof filter === 'function' && filter.call(this, target, this) ){
+				_dispatchEvent(el, 'filter', target);
+				return; // cancel dnd
+			}
+			else if( filter ){
+				filter = filter.split(',').filter(function (criteria) {
+					return _closest(target, criteria.trim(), el);
+				});
+
+				if (filter.length) {
+					_dispatchEvent(el, 'filter', target);
+					return; // cancel dnd
+				}
+			}
+
 			if( options.handle ){
 				target = _closest(target, options.handle, el);
 			}
@@ -192,7 +218,7 @@
 				} catch (err){ }
 
 
-				dragEl.dispatchEvent(_createEvent('start', dragEl));
+				_dispatchEvent(dragEl, 'start');
 			}
 		},
 
@@ -381,17 +407,17 @@
 
 					if( !rootEl.contains(dragEl) ){
 						// Remove event
-						rootEl.dispatchEvent(_createEvent('remove', dragEl));
+						_dispatchEvent(rootEl, 'remove', dragEl);
 
 						// Add event
-						dragEl.dispatchEvent(_createEvent('add', dragEl));
+						_dispatchEvent(dragEl, 'add');
 					}
 					else if( dragEl.nextSibling !== nextEl ){
 						// Update event
-						dragEl.dispatchEvent(_createEvent('update', dragEl));
+						_dispatchEvent(dragEl, 'update');
 					}
 
-					dragEl.dispatchEvent(_createEvent('stop', dragEl));
+					_dispatchEvent(dragEl, 'end');
 				}
 
 				// Set NULL
@@ -455,17 +481,27 @@
 		},
 
 
+		/**
+		 * 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.
+		 * @param   {HTMLElement}  el
+		 * @param   {String}       [selector]  default: `options.draggable`
+		 * @returns {HTMLElement|null}
+		 */
+		closest: function (el, selector) {
+			return _closest(el, selector || this.options.draggable, this.el);
+		},
+
+
 		/**
 		 * Destroy
 		 */
 		destroy: function () {
 			var el = this.el, options = this.options;
 
-			_off(el, 'add', options.onAdd);
-			_off(el, 'update', options.onUpdate);
-			_off(el, 'remove', options.onRemove);
-			_off(el, 'start', options.onStart);
-			_off(el, 'stop', options.onEnd);
+			_customEvents.forEach(function (name) {
+				_off(el, name.substr(2).toLowerCase(), options[name]);
+			});
+
 			_off(el, 'mousedown', this._onTapStart);
 			_off(el, 'touchstart', this._onTapStart);
 			_off(el, 'selectstart', this._onTapStart);
@@ -610,9 +646,11 @@
 			i = str.length,
 			sum = 0
 		;
+
 		while (i--) {
 			sum += str.charCodeAt(i);
 		}
+
 		return sum.toString(36);
 	}
 
@@ -625,13 +663,15 @@
 		find: _find,
 		bind: _bind,
 		closest: _closest,
-		toggleClass: _toggleClass
+		toggleClass: _toggleClass,
+		createEvent: _createEvent,
+		dispatchEvent: _dispatchEvent
 	};
 
 
-	Sortable.version = '0.4.2';
+	Sortable.version = '0.5.0';
 
 
 	// Export
-	return	Sortable;
+	return Sortable;
 });

Sortable.min.js

-/*! Sortable 0.4.2 - MIT | git://github.com/rubaxa/Sortable.git */
-!function(a){"use strict";"function"==typeof define&&define.amd?define(a):"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=a():window.Sortable=a()}(function(){"use strict";function a(a,c){this.el=a,this.options=c=c||{},c.group=c.group||Math.random(),c.store=c.store||null,c.handle=c.handle||null,c.draggable=c.draggable||a.children[0]&&a.children[0].nodeName||(/[uo]l/i.test(a.nodeName)?"li":"*"),c.ghostClass=c.ghostClass||"sortable-ghost",c.ignore=c.ignore||"a, img","onAdd onUpdate onRemove onStart onEnd".split(" ").forEach(function(a){c[a]=b(this,c[a]||E)}),a[x]=c.group;for(var d in this)"_"===d.charAt(0)&&(this[d]=b(this,this[d]));e(a,"add",c.onAdd),e(a,"update",c.onUpdate),e(a,"remove",c.onRemove),e(a,"start",c.onStart),e(a,"stop",c.onEnd),e(a,"mousedown",this._onTapStart),e(a,"touchstart",this._onTapStart),B&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),G.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=F.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(F.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||z,b=b.split(".");var d=b.shift().toUpperCase(),e=new RegExp("\\s("+b.join("|")+")\\s","g");do if(!(""!==d&&a.nodeName!=d||b.length&&((" "+a.className+" ").match(e)||[]).length!=b.length))return a;while(a!==c&&(a=a.parentNode))}return null}function d(a){a.dataTransfer.dropEffect="move",a.preventDefault()}function e(a,b,c){a.addEventListener(b,c,!1)}function f(a,b,c){a.removeEventListener(b,c,!1)}function g(a,b,c){if(a)if(a.classList)a.classList[c?"add":"remove"](b);else{var d=(" "+a.className+" ").replace(/\s+/g," ").replace(" "+b+" ","");a.className=d+(c?" "+b:"")}}function h(a,b,c){if(a&&a.style){if(void 0===c)return z.defaultView&&z.defaultView.getComputedStyle?c=z.defaultView.getComputedStyle(a,""):a.currentStyle&&(c=a.currentStyle),void 0===b?c:c[b];a.style[b]=c+("string"==typeof c?"":"px")}}function i(a,b,c){if(a){var d=a.getElementsByTagName(b),e=0,f=d.length;if(c)for(;f>e;e++)c(d[e],e);return d}return[]}function j(a){return a.draggable=!1}function k(){C=!1}function l(a,b){var c=a.lastElementChild.getBoundingClientRect();return b.clientY-(c.top+c.height)>5}function m(a){for(var b=a.tagName+a.className+a.src+a.href+a.textContent,c=b.length,d=0;c--;)d+=b.charCodeAt(c);return d.toString(36)}var n,o,p,q,r,s,t,u,v,w,x="Sortable"+(new Date).getTime(),y=window,z=y.document,A=y.parseInt,B=!!z.createElement("div").dragDrop,C=!1,D=function(a,b){var c=z.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},E=function(){},F=[].slice,G=[];return a.prototype={constructor:a,_applyEffects:function(){g(n,this.options.ghostClass,!0)},_onTapStart:function(a){var b=a.touches&&a.touches[0],f=(b||a).target,g=this.options,h=this.el;if(g.handle&&(f=c(f,g.handle,h)),f=c(f,g.draggable,h),f&&"selectstart"==a.type&&"A"!=f.tagName&&"IMG"!=f.tagName&&f.dragDrop(),f&&!n&&f.parentNode===h){v=a,p=this.el,n=f,q=n.nextSibling,u=this.options.group,n.draggable=!0,g.ignore.split(",").forEach(function(a){i(f,a.trim(),j)}),b&&(v={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(v,!0),a.preventDefault()),e(z,"mouseup",this._onDrop),e(z,"touchend",this._onDrop),e(z,"touchcancel",this._onDrop),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(z,"dragover",d);try{z.selection?z.selection.empty():window.getSelection().removeAllRanges()}catch(k){}n.dispatchEvent(D("start",n))}},_emulateDragOver:function(){if(w){h(o,"display","none");var a=z.elementFromPoint(w.clientX,w.clientY),b=a,c=this.options.group,d=G.length;if(b)do{if(b[x]===c){for(;d--;)G[d]({clientX:w.clientX,clientY:w.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(o,"display","")}},_onTouchMove:function(a){if(v){var b=a.touches[0],c=b.clientX-v.clientX,d=b.clientY-v.clientY,e="translate3d("+c+"px,"+d+"px,0)";w=b,h(o,"webkitTransform",e),h(o,"mozTransform",e),h(o,"msTransform",e),h(o,"transform",e),a.preventDefault()}},_onDragStart:function(a,b){var c=a.dataTransfer;if(this._offUpEvents(),b){var d,f=n.getBoundingClientRect(),g=h(n);o=n.cloneNode(!0),h(o,"top",f.top-A(g.marginTop,10)),h(o,"left",f.left-A(g.marginLeft,10)),h(o,"width",f.width),h(o,"height",f.height),h(o,"opacity","0.8"),h(o,"position","fixed"),h(o,"zIndex","100000"),p.appendChild(o),d=o.getBoundingClientRect(),h(o,"width",2*f.width-d.width),h(o,"height",2*f.height-d.height),e(z,"touchmove",this._onTouchMove),e(z,"touchend",this._onDrop),e(z,"touchcancel",this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else c.effectAllowed="move",c.setData("Text",n.textContent),e(z,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!C&&u===this.options.group&&(void 0===a.rootEl||a.rootEl===this.el)){var b=this.el,d=c(a.target,this.options.draggable,b);if(0===b.children.length||b.children[0]===o||b===a.target&&l(b,a))b.appendChild(n);else if(d&&d!==n&&void 0!==d.parentNode[x]){r!==d&&(r=d,s=h(d),t=d.getBoundingClientRect());var e,f=t,g=f.right-f.left,i=f.bottom-f.top,j=/left|right|inline/.test(s.cssFloat+s.display),m=d.offsetWidth>n.offsetWidth,p=d.offsetHeight>n.offsetHeight,q=(j?(a.clientX-f.left)/g:(a.clientY-f.top)/i)>.5,v=d.nextElementSibling;C=!0,setTimeout(k,30),e=j?d.previousElementSibling===n&&!m||q&&m:v!==n&&!p||q&&p,e&&!v?b.appendChild(n):d.parentNode.insertBefore(n,e?v:d)}}},_offUpEvents:function(){f(z,"mouseup",this._onDrop),f(z,"touchmove",this._onTouchMove),f(z,"touchend",this._onDrop),f(z,"touchcancel",this._onDrop)},_onDrop:function(a){clearInterval(this._loopId),f(z,"drop",this._onDrop),f(z,"dragover",d),f(this.el,"dragend",this._onDrop),f(this.el,"dragstart",this._onDragStart),f(this.el,"selectstart",this._onTapStart),this._offUpEvents(),a&&(a.preventDefault(),a.stopPropagation(),o&&o.parentNode.removeChild(o),n&&(j(n),g(n,this.options.ghostClass,!1),p.contains(n)?n.nextSibling!==q&&n.dispatchEvent(D("update",n)):(p.dispatchEvent(D("remove",n)),n.dispatchEvent(D("add",n))),n.dispatchEvent(D("stop",n))),p=n=o=q=v=w=r=s=u=null,this.options.store&&this.options.store.set(this))},toArray:function(){for(var a,b=[],c=this.el.children,d=0,e=c.length;e>d;d++)a=c[d],b.push(a.getAttribute("data-id")||m(a));return b},sort:function(a){var b={},c=this.el;this.toArray().forEach(function(a,d){b[a]=c.children[d]}),a.forEach(function(a){b[a]&&(c.removeChild(b[a]),c.appendChild(b[a]))})},destroy:function(){var a=this.el,b=this.options;f(a,"add",b.onAdd),f(a,"update",b.onUpdate),f(a,"remove",b.onRemove),f(a,"start",b.onStart),f(a,"stop",b.onEnd),f(a,"mousedown",this._onTapStart),f(a,"touchstart",this._onTapStart),f(a,"selectstart",this._onTapStart),f(a,"dragover",this._onDragOver),f(a,"dragenter",this._onDragOver),Array.prototype.forEach.call(a.querySelectorAll("[draggable]"),function(a){a.removeAttribute("draggable")}),G.splice(G.indexOf(this._onDragOver),1),this._onDrop(),this.el=null}},a.utils={on:e,off:f,css:h,find:i,bind:b,closest:c,toggleClass:g},a.version="0.4.2",a});
+/*! Sortable 0.5.0 - MIT | git://github.com/rubaxa/Sortable.git */
+!function(a){"use strict";"function"==typeof define&&define.amd?define(a):"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=a():window.Sortable=a()}(function(){"use strict";function a(a,c){this.el=a,this.options=c=c||{};var d={group:Math.random(),store:null,handle:null,draggable:a.children[0]&&a.children[0].nodeName||(/[uo]l/i.test(a.nodeName)?"li":"*"),ghostClass:"sortable-ghost",ignore:"a, img",filter:null};for(var f in d)c[f]=c[f]||d[f];F.forEach(function(d){c[d]=b(this,c[d]||G),e(a,d.substr(2).toLowerCase(),c[d])}),a[x]=c.group;for(var g in this)"_"===g.charAt(0)&&(this[g]=b(this,this[g]));e(a,"mousedown",this._onTapStart),e(a,"touchstart",this._onTapStart),B&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),I.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=H.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(H.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||z,b=b.split(".");var d=b.shift().toUpperCase(),e=new RegExp("\\s("+b.join("|")+")\\s","g");do if(!(""!==d&&a.nodeName!=d||b.length&&((" "+a.className+" ").match(e)||[]).length!=b.length))return a;while(a!==c&&(a=a.parentNode))}return null}function d(a){a.dataTransfer.dropEffect="move",a.preventDefault()}function e(a,b,c){a.addEventListener(b,c,!1)}function f(a,b,c){a.removeEventListener(b,c,!1)}function g(a,b,c){if(a)if(a.classList)a.classList[c?"add":"remove"](b);else{var d=(" "+a.className+" ").replace(/\s+/g," ").replace(" "+b+" ","");a.className=d+(c?" "+b:"")}}function h(a,b,c){if(a&&a.style){if(void 0===c)return z.defaultView&&z.defaultView.getComputedStyle?c=z.defaultView.getComputedStyle(a,""):a.currentStyle&&(c=a.currentStyle),void 0===b?c:c[b];a.style[b]=c+("string"==typeof c?"":"px")}}function i(a,b,c){if(a){var d=a.getElementsByTagName(b),e=0,f=d.length;if(c)for(;f>e;e++)c(d[e],e);return d}return[]}function j(a){return a.draggable=!1}function k(){C=!1}function l(a,b){var c=a.lastElementChild.getBoundingClientRect();return b.clientY-(c.top+c.height)>5}function m(a){for(var b=a.tagName+a.className+a.src+a.href+a.textContent,c=b.length,d=0;c--;)d+=b.charCodeAt(c);return d.toString(36)}var n,o,p,q,r,s,t,u,v,w,x="Sortable"+(new Date).getTime(),y=window,z=y.document,A=y.parseInt,B=!!z.createElement("div").dragDrop,C=!1,D=function(a,b){var c=z.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},E=function(a,b,c){a.dispatchEvent(D(b,c||a))},F="onAdd onUpdate onRemove onStart onEnd onFilter".split(" "),G=function(){},H=[].slice,I=[];return a.prototype={constructor:a,_applyEffects:function(){g(n,this.options.ghostClass,!0)},_onTapStart:function(a){var b=a.touches&&a.touches[0],f=(b||a).target,g=this.options,h=this.el,k=g.filter;if("function"==typeof k&&k.call(this,f,this))return E(h,"filter",f),void 0;if(k&&(k=k.split(",").filter(function(a){return c(f,a.trim(),h)}),k.length))return E(h,"filter",f),void 0;if(g.handle&&(f=c(f,g.handle,h)),f=c(f,g.draggable,h),f&&"selectstart"==a.type&&"A"!=f.tagName&&"IMG"!=f.tagName&&f.dragDrop(),f&&!n&&f.parentNode===h){v=a,p=this.el,n=f,q=n.nextSibling,u=this.options.group,n.draggable=!0,g.ignore.split(",").forEach(function(a){i(f,a.trim(),j)}),b&&(v={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(v,!0),a.preventDefault()),e(z,"mouseup",this._onDrop),e(z,"touchend",this._onDrop),e(z,"touchcancel",this._onDrop),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(z,"dragover",d);try{z.selection?z.selection.empty():window.getSelection().removeAllRanges()}catch(l){}E(n,"start")}},_emulateDragOver:function(){if(w){h(o,"display","none");var a=z.elementFromPoint(w.clientX,w.clientY),b=a,c=this.options.group,d=I.length;if(b)do{if(b[x]===c){for(;d--;)I[d]({clientX:w.clientX,clientY:w.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(o,"display","")}},_onTouchMove:function(a){if(v){var b=a.touches[0],c=b.clientX-v.clientX,d=b.clientY-v.clientY,e="translate3d("+c+"px,"+d+"px,0)";w=b,h(o,"webkitTransform",e),h(o,"mozTransform",e),h(o,"msTransform",e),h(o,"transform",e),a.preventDefault()}},_onDragStart:function(a,b){var c=a.dataTransfer;if(this._offUpEvents(),b){var d,f=n.getBoundingClientRect(),g=h(n);o=n.cloneNode(!0),h(o,"top",f.top-A(g.marginTop,10)),h(o,"left",f.left-A(g.marginLeft,10)),h(o,"width",f.width),h(o,"height",f.height),h(o,"opacity","0.8"),h(o,"position","fixed"),h(o,"zIndex","100000"),p.appendChild(o),d=o.getBoundingClientRect(),h(o,"width",2*f.width-d.width),h(o,"height",2*f.height-d.height),e(z,"touchmove",this._onTouchMove),e(z,"touchend",this._onDrop),e(z,"touchcancel",this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else c.effectAllowed="move",c.setData("Text",n.textContent),e(z,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!C&&u===this.options.group&&(void 0===a.rootEl||a.rootEl===this.el)){var b=this.el,d=c(a.target,this.options.draggable,b);if(0===b.children.length||b.children[0]===o||b===a.target&&l(b,a))b.appendChild(n);else if(d&&d!==n&&void 0!==d.parentNode[x]){r!==d&&(r=d,s=h(d),t=d.getBoundingClientRect());var e,f=t,g=f.right-f.left,i=f.bottom-f.top,j=/left|right|inline/.test(s.cssFloat+s.display),m=d.offsetWidth>n.offsetWidth,p=d.offsetHeight>n.offsetHeight,q=(j?(a.clientX-f.left)/g:(a.clientY-f.top)/i)>.5,v=d.nextElementSibling;C=!0,setTimeout(k,30),e=j?d.previousElementSibling===n&&!m||q&&m:v!==n&&!p||q&&p,e&&!v?b.appendChild(n):d.parentNode.insertBefore(n,e?v:d)}}},_offUpEvents:function(){f(z,"mouseup",this._onDrop),f(z,"touchmove",this._onTouchMove),f(z,"touchend",this._onDrop),f(z,"touchcancel",this._onDrop)},_onDrop:function(a){clearInterval(this._loopId),f(z,"drop",this._onDrop),f(z,"dragover",d),f(this.el,"dragend",this._onDrop),f(this.el,"dragstart",this._onDragStart),f(this.el,"selectstart",this._onTapStart),this._offUpEvents(),a&&(a.preventDefault(),a.stopPropagation(),o&&o.parentNode.removeChild(o),n&&(j(n),g(n,this.options.ghostClass,!1),p.contains(n)?n.nextSibling!==q&&E(n,"update"):(E(p,"remove",n),E(n,"add")),E(n,"end")),p=n=o=q=v=w=r=s=u=null,this.options.store&&this.options.store.set(this))},toArray:function(){for(var a,b=[],c=this.el.children,d=0,e=c.length;e>d;d++)a=c[d],b.push(a.getAttribute("data-id")||m(a));return b},sort:function(a){var b={},c=this.el;this.toArray().forEach(function(a,d){b[a]=c.children[d]}),a.forEach(function(a){b[a]&&(c.removeChild(b[a]),c.appendChild(b[a]))})},closest:function(a,b){return c(a,b||this.options.draggable,this.el)},destroy:function(){var a=this.el,b=this.options;F.forEach(function(c){f(a,c.substr(2).toLowerCase(),b[c])}),f(a,"mousedown",this._onTapStart),f(a,"touchstart",this._onTapStart),f(a,"selectstart",this._onTapStart),f(a,"dragover",this._onDragOver),f(a,"dragenter",this._onDragOver),Array.prototype.forEach.call(a.querySelectorAll("[draggable]"),function(a){a.removeAttribute("draggable")}),I.splice(I.indexOf(this._onDragOver),1),this._onDrop(),this.el=null}},a.utils={on:e,off:f,css:h,find:i,bind:b,closest:c,toggleClass:g,createEvent:D,dispatchEvent:E},a.version="0.5.0",a});
\ No newline at end of file

bower.json

 {
   "name": "Sortable",
   "main": "Sortable.js",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "homepage": "http://rubaxa.github.io/Sortable/",
   "authors": [
     "RubaXa <ibnRubaXa@gmail.com>"

component.json

 {
   "name": "Sortable",
   "main": "Sortable.js",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "homepage": "http://rubaxa.github.io/Sortable/",
   "repo": "RubaXa/Sortable",
   "authors": [

index.html

@@ -10,174 +10,10 @@
 	<meta name="description" content="Sortable - is a minimalist JavaScript library for modern browsers and touch devices (No jQuery)."/>
 	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 
-	<link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'/>
+	<link href="//rubaxa.github.io/Ply/ply.css" rel="stylesheet" type="text/css"/>
+	<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css"/>
 
-	<style>
-		html {
-			background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
-			background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
-			background-image: linear-gradient(to bottom, #F4E2C9 20%, #F4D7C9 100%);
-		}
-
-		html, body {
-			margin: 0;
-			padding: 0;
-			position: relative;
-			color: #464637;
-			min-height: 100%;
-			font-size: 20px;
-			font-family: 'Roboto', sans-serif;
-			font-weight: 300;
-		}
-
-
-		h1 {
-			color: #FF3F00;
-			font-size: 20px;
-			font-family: 'Roboto', sans-serif;
-			font-weight: 300;
-			text-align: center;
-		}
-
-
-		ul {
-			margin: 0;
-			padding: 0;
-			list-style: none;
-		}
-
-		.container {
-			width: 80%;
-			margin: auto;
-			min-width: 1100px;
-			max-width: 1300px;
-			position: relative;
-		}
-
-		@media (min-width: 750px) and (max-width: 970px){
-			.container {
-				width: 100%;
-				min-width: 750px;
-			}
-		}
-
-
-		.sortable-ghost {
-			opacity: .2;
-		}
-
-
-		img {
-			border: 0;
-			vertical-align: middle;
-		}
-
-
-		.logo {
-			top: 55px;
-			left: 30px;
-			position: absolute;
-		}
-
-
-		.title {
-			color: #fff;
-			padding: 3px 10px;
-			display: inline-block;
-			position: relative;
-			background-color: #FF7373;
-			z-index: 1000;
-		}
-			.title_xl {
-				padding: 3px 15px;
-				font-size: 40px;
-			}
-
-
-
-		.tile {
-			width: 22%;
-			min-width: 245px;
-			color: #FF7270;
-			padding: 10px 30px;
-			text-align: center;
-			margin-top: 15px;
-			margin-left: 5px;
-			margin-right: 30px;
-			background-color: #fff;
-			display: inline-block;
-			vertical-align: top;
-		}
-			.tile__name {
-				cursor: move;
-				padding-bottom: 10px;
-				border-bottom: 1px solid #FF7373;
-			}
-
-			.tile__list {
-				margin-top: 10px;
-			}
-				.tile__list:last-child {
-					margin-right: 0;
-					min-height: 80px;
-				}
-
-				.tile__list img {
-					cursor: move;
-					margin: 10px;
-					border-radius: 100%;
-				}
-
-
-
-		.block {
-			opacity: 1;
-			position: absolute;
-		}
-			.block__list {
-				padding: 20px 0;
-				max-width: 360px;
-				margin-top: -8px;
-				margin-left: 5px;
-				background-color: #fff;
-			}
-				.block__list li { cursor: move; }
-
-			.block__list_words li {
-				background-color: #fff;
-				padding: 10px 40px;
-			}
-				.block__list_words .sortable-ghost {
-					opacity: 0.4;
-					background-color: #F4E2C9;
-				}
-
-				.block__list_words li:first-letter {
-					text-transform: uppercase;
-				}
-
-			.block__list_tags {
-				padding-left: 30px;
-			}
-
-			.block__list_tags:after {
-				clear: both;
-				content: '';
-				display: block;
-			}
-				.block__list_tags li {
-					color: #fff;
-					float: left;
-					margin: 8px 20px 10px 0;
-					padding: 5px 10px;
-					min-width: 10px;
-					background-color: #5F9EDF;
-					text-align: center;
-				}
-					.block__list_tags li:first-child:first-letter {
-						text-transform: uppercase;
-					}
-	</style>
+	<link href="st/app.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 
@@ -218,6 +54,7 @@
 	</div>
 
 
+	<a name="m"></a>
 	<div class="container">
 		<div id="multi" style="margin-left: 30px">
 			<div><div data-force="5" class="layer title title_xl">Multi</div></div>
@@ -253,6 +90,25 @@
 	</div>
 
 
+	<a name="e"></a>
+	<div class="container" style="margin-top: 100px">
+		<div id="filter" style="margin-left: 30px">
+			<div><div data-force="5" class="layer title title_xl">Editable list</div></div>
+
+			<div style="margin-top: -8px; margin-left: 10px" class="block__list block__list_words">
+				<ul id="editable">
+					<li>Оля<i class="js-remove">✖</i></li>
+					<li>Владимир<i class="js-remove">✖</i></li>
+					<li>Алина<i class="js-remove">✖</i></li>
+				</ul>
+
+				<button id="addUser">Add</button>
+			</div>
+		</div>
+	</div>
+
+
+	<a name="c"></a>
 	<div class="container" style="margin-top: 100px">
 		<div style="margin-left: 30px">
 			<div><div class="layer title title_xl">Code example</div></div>
@@ -281,6 +137,16 @@ var sort = new Sortable(container, {
 
 // ..
 sort.destroy();
+
+
+// Editable list
+var editableList = new Sortable(editable, {
+  filter: '.js-remove',
+  onFilter: function (evt) {
+    var el = editableList.closest(evt.item); // get dragged item
+    el && el.parentNode.removeChild(el);
+  }
+});
 </code></pre>
 		</div>
 
@@ -297,6 +163,7 @@ sort.destroy();
 
 
 	<script src="Sortable.js"></script>
+	<script src="//rubaxa.github.io/Ply/Ply.min.js"></script>
 
 	<script>
 		(function (){
@@ -309,7 +176,7 @@ sort.destroy();
 			}
 
 
-			window.x = new Sortable(foo, {
+			new Sortable(foo, {
 				group: "words",
 				store: {
 					get: function (sortable) {
@@ -345,6 +212,27 @@ sort.destroy();
 			});
 
 
+			var editableList = new Sortable(editable, {
+				filter: '.js-remove',
+				onFilter: function (evt) {
+					var el = editableList.closest(evt.item);
+					el && el.parentNode.removeChild(el);
+				}
+			});
+
+
+			addUser.onclick = function () {
+				Ply.dialog('prompt', {
+					title: 'Add',
+					form: { name: 'name' }
+				}).done(function (ui) {
+					var el = document.createElement('li');
+					el.innerHTML = ui.data.name + '<i class="js-remove">✖</i>';
+					editableList.el.appendChild(el);
+				});
+			};
+
+
 			[].forEach.call(multi.getElementsByClassName('tile__list'), function (el){
 				new Sortable(el, { group: 'photo' });
 			});

package.json

 {
   "name": "sortable",
   "exportName": "Sortable",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "devDependencies": {
     "grunt": "*",
     "grunt-version": "*",

st/app.css

+html {
+	background-image: -webkit-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
+	background-image: -ms-linear-gradient(bottom, #F4E2C9 20%, #F4D7C9 100%);
+	background-image: linear-gradient(to bottom, #F4E2C9 20%, #F4D7C9 100%);
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	position: relative;
+	color: #464637;
+	min-height: 100%;
+	font-size: 20px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+}
+
+
+h1 {
+	color: #FF3F00;
+	font-size: 20px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+	text-align: center;
+}
+
+
+ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.container {
+	width: 80%;
+	margin: auto;
+	min-width: 1100px;
+	max-width: 1300px;
+	position: relative;
+}
+
+@media (min-width: 750px) and (max-width: 970px){
+	.container {
+		width: 100%;
+		min-width: 750px;
+	}
+}
+
+
+.sortable-ghost {
+	opacity: .2;
+}
+
+
+img {
+	border: 0;
+	vertical-align: middle;
+}
+
+
+.logo {
+	top: 55px;
+	left: 30px;
+	position: absolute;
+}
+
+
+.title {
+	color: #fff;
+	padding: 3px 10px;
+	display: inline-block;
+	position: relative;
+	background-color: #FF7373;
+	z-index: 1000;
+}
+	.title_xl {
+		padding: 3px 15px;
+		font-size: 40px;
+	}
+
+
+
+.tile {
+	width: 22%;
+	min-width: 245px;
+	color: #FF7270;
+	padding: 10px 30px;
+	text-align: center;
+	margin-top: 15px;
+	margin-left: 5px;
+	margin-right: 30px;
+	background-color: #fff;
+	display: inline-block;
+	vertical-align: top;
+}
+	.tile__name {
+		cursor: move;
+		padding-bottom: 10px;
+		border-bottom: 1px solid #FF7373;
+	}
+
+	.tile__list {
+		margin-top: 10px;
+	}
+		.tile__list:last-child {
+			margin-right: 0;
+			min-height: 80px;
+		}
+
+		.tile__list img {
+			cursor: move;
+			margin: 10px;
+			border-radius: 100%;
+		}
+
+
+
+.block {
+	opacity: 1;
+	position: absolute;
+}
+	.block__list {
+		padding: 20px 0;
+		max-width: 360px;
+		margin-top: -8px;
+		margin-left: 5px;
+		background-color: #fff;
+	}
+		.block__list li { cursor: move; }
+
+	.block__list_words li {
+		background-color: #fff;
+		padding: 10px 40px;
+	}
+		.block__list_words .sortable-ghost {
+			opacity: 0.4;
+			background-color: #F4E2C9;
+		}
+
+		.block__list_words li:first-letter {
+			text-transform: uppercase;
+		}
+
+	.block__list_tags {
+		padding-left: 30px;
+	}
+
+	.block__list_tags:after {
+		clear: both;
+		content: '';
+		display: block;
+	}
+		.block__list_tags li {
+			color: #fff;
+			float: left;
+			margin: 8px 20px 10px 0;
+			padding: 5px 10px;
+			min-width: 10px;
+			background-color: #5F9EDF;
+			text-align: center;
+		}
+			.block__list_tags li:first-child:first-letter {
+				text-transform: uppercase;
+			}
+
+
+
+#editable {}
+	#editable li {
+		position: relative;
+	}
+
+	#editable i {
+		-webkit-transition: opacity .2s;
+		transition: opacity .2s;
+		opacity: 0;
+		display: block;
+		cursor: pointer;
+		color: #c00;
+		top: 10px;
+		right: 40px;
+		position: absolute;
+		font-style: normal;
+	}
+
+	#editable li:hover i {
+		opacity: 1;
+	}
+
+
+#filter {}
+	#filter button {
+		color: #fff;
+		width: 100%;
+		border: none;
+		outline: 0;
+		opacity: .5;
+		margin: 10px 0 0;
+		transition: opacity .1s ease;
+		cursor: pointer;
+		background: #5F9EDF;
+		padding: 10px 0;
+		font-size: 20px;
+	}
+		#filter button:hover {
+			opacity: 1;
+		}
+
+	#filter .block__list {
+		padding-bottom: 0;
+	}