diff --git a/README.md b/README.md index 38fd8d7..8713a9f 100644 --- a/README.md +++ b/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 + +``` + ```js new Sortable(el, { group: "localStorage-example", diff --git a/Sortable.js b/Sortable.js index e546be3..fd4ee2e 100644 --- a/Sortable.js +++ b/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; }); diff --git a/Sortable.min.js b/Sortable.min.js index 1e9febd..85ef8fb 100644 --- a/Sortable.min.js +++ b/Sortable.min.js @@ -1,2 +1,2 @@ -/*! 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}); \ No newline at end of file +/*! 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 diff --git a/bower.json b/bower.json index f13fbde..191ced8 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "Sortable", "main": "Sortable.js", - "version": "0.4.2", + "version": "0.5.0", "homepage": "http://rubaxa.github.io/Sortable/", "authors": [ "RubaXa " diff --git a/component.json b/component.json index 131c5d5..8fb5595 100644 --- a/component.json +++ b/component.json @@ -1,7 +1,7 @@ { "name": "Sortable", "main": "Sortable.js", - "version": "0.4.2", + "version": "0.5.0", "homepage": "http://rubaxa.github.io/Sortable/", "repo": "RubaXa/Sortable", "authors": [ diff --git a/index.html b/index.html index 2e28a28..8a90236 100644 --- a/index.html +++ b/index.html @@ -10,174 +10,10 @@ - + + - + @@ -218,6 +54,7 @@ +
Multi
@@ -253,6 +90,25 @@
+ +
+
+
Editable list
+ +
+
    +
  • Оля✖
    • +
  • Владимир✖
    • +
  • Алина✖
    • +
+ + +
+
+
+ + +
Code example
@@ -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); + } +});
@@ -297,6 +163,7 @@ sort.destroy(); +