diff --git a/README.md b/README.md index 5e17cb2..64b4552 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ Sortable.create(el); ### Options ```js var sortabel = new Sortable(el, { - group: "name", // or { name: "..", pull: [true, false, clone], put: true } + group: "name", // or { name: "..", pull: [true, false, clone], put: [true, false, array] } sort: true, // sorting inside list store: null, // @see Store animation: 150, // ms, animation speed moving items when sorting, `0` — without animation @@ -65,6 +65,16 @@ var sortabel = new Sortable(el, { --- +### `group` option + + * name:`string` — group name + * pull:`true|false|'clone'` — ability to move from the list. `clone` — cloning drag item when moving from the list. + * put:`true|false|["foo", "bar"]` — the possibility of adding an element from the other list, or an array of names groups, which can be taken. + + +--- + + ### Method ##### closest(el:`String`[, selector:`HTMLElement`]):`HTMLElement|null` diff --git a/Sortable.js b/Sortable.js index a18f95c..1681aff 100644 --- a/Sortable.js +++ b/Sortable.js @@ -99,6 +99,7 @@ options.group = { name: options.group }; } + ['pull', 'put'].forEach(function (key) { if (!(key in options.group)) { options.group[key] = true; @@ -356,11 +357,12 @@ revert, options = this.options, group = options.group, + groupPut = group.put, isOwner = (activeGroup === group); if( !_silent && - (activeGroup.name === group.name) && - (isOwner && (options.sort || (revert = !rootEl.contains(dragEl))) || group.put && activeGroup.pull) && + (activeGroup.name === group.name || groupPut && groupPut.indexOf && groupPut.indexOf(activeGroup.name) > -1) && + (isOwner && (options.sort || (revert = !rootEl.contains(dragEl))) || groupPut && activeGroup.pull) && (evt.rootEl === void 0 || evt.rootEl === this.el) ){ target = _closest(evt.target, this.options.draggable, el); @@ -492,6 +494,8 @@ _dispatchEvent(dragEl, 'end'); } + cloneEl.parentNode.removeChild(cloneEl); + // Set NULL rootEl = dragEl = diff --git a/Sortable.min.js b/Sortable.min.js index 0da18e2..bc9314e 100644 --- a/Sortable.min.js +++ b/Sortable.min.js @@ -1,2 +1,2 @@ /*! Sortable 0.6.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(),sort:!0,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,animation:0};for(var f in d)c[f]=c[f]||d[f];c.group.name||(c.group={name:c.group}),["pull","put"].forEach(function(a){a in c.group||(c.group[a]=!0)}),F.forEach(function(d){c[d]=b(this,c[d]||G),e(a,d.substr(2).toLowerCase(),c[d])},this),a[x]=c.group.name;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){var d=a&&a.style;if(d){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];b in d||(b="-webkit-"+b),d[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,k=this.el,l=g.filter;if("mousedown"!==a.type||0===a.button){if("function"==typeof l){if(l.call(this,f,this))return E(k,"filter",f),void 0}else if(l&&(l=l.split(",").filter(function(a){return c(f,a.trim(),k)}),l.length))return E(k,"filter",f),void 0;if(g.handle&&(f=c(f,g.handle,k)),f=c(f,g.draggable,k),f&&"selectstart"==a.type&&"A"!=f.tagName&&"IMG"!=f.tagName&&f.dragDrop(),f&&!n&&f.parentNode===k){v=a,q=this.el,n=f,r=n.nextSibling,u=this.options.group,p=n.cloneNode(!0),h(p,"display","none"),q.insertBefore(p,n),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(m){}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.name,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"),q.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){var b,d,e,f=this.el,g=this.options,i=g.group,j=u===i;if(!C&&u.name===i.name&&(j&&(g.sort||(e=!q.contains(n)))||i.put&&u.pull)&&(void 0===a.rootEl||a.rootEl===this.el)){if(b=c(a.target,this.options.draggable,f),d=n.getBoundingClientRect(),"clone"==u.pull&&p.state!==j&&(h(p,"display",j?"none":""),!j&&p.state&&q.insertBefore(p,n),p.state=j),e)return q.insertBefore(n,p),void 0;if(0===f.children.length||f.children[0]===o||f===a.target&&l(f,a))f.appendChild(n),this._animate(d,n);else if(b&&!b.animated&&b!==n&&void 0!==b.parentNode[x]){s!==b&&(s=b,t=h(b));var m,r=b.getBoundingClientRect(),v=r.right-r.left,w=r.bottom-r.top,y=/left|right|inline/.test(t.cssFloat+t.display),z=b.offsetWidth>n.offsetWidth,A=b.offsetHeight>n.offsetHeight,B=(y?(a.clientX-r.left)/v:(a.clientY-r.top)/w)>.5,D=b.nextElementSibling;C=!0,setTimeout(k,30),m=y?b.previousElementSibling===n&&!z||B&&z:D!==n&&!A||B&&A,m&&!D?(f.appendChild(n),this._animate(d,n)):(b.parentNode.insertBefore(n,m?D:b),this._animate(d,n),this._animate(r,b))}}},_animate:function(a,b){var c=this.options.animation;if(c){var d=b.getBoundingClientRect();h(b,"transition","none"),h(b,"transform","translate3d("+(a.left-d.left)+"px,"+(a.top-d.top)+"px,0)"),b.offsetWidth,h(b,"transition","all "+c+"ms"),h(b,"transform","translate3d(0,0,0)"),clearTimeout(b.animated),b.animated=setTimeout(function(){h(b,"transition",""),b.animated=!1},c)}},_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),q.contains(n)?n.nextSibling!==r&&E(n,"update"):(E(q,"remove",n),E(n,"add")),E(n,"end")),q=n=o=r=p=v=w=s=t=u=null,this.options.store&&this.options.store.set(this))},toArray:function(){for(var a,b=[],d=this.el.children,e=0,f=d.length;f>e;e++)a=d[e],c(a,this.options.draggable,this.el)&&b.push(a.getAttribute("data-id")||m(a));return b},sort:function(a){var b={},d=this.el;this.toArray().forEach(function(a,e){var f=d.children[e];c(f,this.options.draggable,d)&&(b[a]=f)},this),a.forEach(function(a){b[a]&&(d.removeChild(b[a]),d.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.6.0",a.create=function(b,c){return new a(b,c)},a}); \ No newline at end of file +!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(),sort:!0,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,animation:0};for(var f in d)!(f in c)&&(c[f]=d[f]);c.group.name||(c.group={name:c.group}),["pull","put"].forEach(function(a){a in c.group||(c.group[a]=!0)}),F.forEach(function(d){c[d]=b(this,c[d]||G),e(a,d.substr(2).toLowerCase(),c[d])},this),a[x]=c.group.name;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){var d=a&&a.style;if(d){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];b in d||(b="-webkit-"+b),d[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,k=this.el,l=g.filter;if("mousedown"!==a.type||0===a.button){if("function"==typeof l){if(l.call(this,f,this))return E(k,"filter",f),void 0}else if(l&&(l=l.split(",").filter(function(a){return c(f,a.trim(),k)}),l.length))return E(k,"filter",f),void 0;if(g.handle&&(f=c(f,g.handle,k)),f=c(f,g.draggable,k),f&&"selectstart"==a.type&&"A"!=f.tagName&&"IMG"!=f.tagName&&f.dragDrop(),f&&!n&&f.parentNode===k){v=a,q=this.el,n=f,r=n.nextSibling,u=this.options.group,p=n.cloneNode(!0),h(p,"display","none"),q.insertBefore(p,n),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(m){}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.name,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"),q.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){var b,d,e,f=this.el,g=this.options,i=g.group,j=i.put,m=u===i;if(!C&&(u.name===i.name||j&&j.indexOf&&j.indexOf(u.name)>-1)&&(m&&(g.sort||(e=!q.contains(n)))||j&&u.pull)&&(void 0===a.rootEl||a.rootEl===this.el)){if(b=c(a.target,this.options.draggable,f),d=n.getBoundingClientRect(),"clone"==u.pull&&p.state!==m&&(h(p,"display",m?"none":""),!m&&p.state&&q.insertBefore(p,n),p.state=m),e)return q.insertBefore(n,p),void 0;if(0===f.children.length||f.children[0]===o||f===a.target&&l(f,a))f.appendChild(n),this._animate(d,n);else if(b&&!b.animated&&b!==n&&void 0!==b.parentNode[x]){s!==b&&(s=b,t=h(b));var r,v=b.getBoundingClientRect(),w=v.right-v.left,y=v.bottom-v.top,z=/left|right|inline/.test(t.cssFloat+t.display),A=b.offsetWidth>n.offsetWidth,B=b.offsetHeight>n.offsetHeight,D=(z?(a.clientX-v.left)/w:(a.clientY-v.top)/y)>.5,E=b.nextElementSibling;C=!0,setTimeout(k,30),r=z?b.previousElementSibling===n&&!A||D&&A:E!==n&&!B||D&&B,r&&!E?(f.appendChild(n),this._animate(d,n)):(b.parentNode.insertBefore(n,r?E:b),this._animate(d,n),this._animate(v,b))}}},_animate:function(a,b){var c=this.options.animation;if(c){var d=b.getBoundingClientRect();h(b,"transition","none"),h(b,"transform","translate3d("+(a.left-d.left)+"px,"+(a.top-d.top)+"px,0)"),b.offsetWidth,h(b,"transition","all "+c+"ms"),h(b,"transform","translate3d(0,0,0)"),clearTimeout(b.animated),b.animated=setTimeout(function(){h(b,"transition",""),b.animated=!1},c)}},_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),q.contains(n)?n.nextSibling!==r&&E(n,"update"):(E(q,"remove",n),E(n,"add")),E(n,"end")),p.parentNode.removeChild(p),q=n=o=r=p=v=w=s=t=u=null,this.options.store&&this.options.store.set(this))},toArray:function(){for(var a,b=[],d=this.el.children,e=0,f=d.length;f>e;e++)a=d[e],c(a,this.options.draggable,this.el)&&b.push(a.getAttribute("data-id")||m(a));return b},sort:function(a){var b={},d=this.el;this.toArray().forEach(function(a,e){var f=d.children[e];c(f,this.options.draggable,d)&&(b[a]=f)},this),a.forEach(function(a){b[a]&&(d.removeChild(b[a]),d.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.6.0",a.create=function(b,c){return new a(b,c)},a}); \ No newline at end of file diff --git a/index.html b/index.html index 04ea47e..7d0e030 100644 --- a/index.html +++ b/index.html @@ -297,7 +297,7 @@ var editableList = new Sortable(editable, { pull: false, put: true }].forEach(function (opts, i) { - new Sortable(document.getElementById(opts.name + '-' + (i + 1)), { + new Sortable(document.getElementById('advanced-' + (i + 1)), { group: opts, animation: 150 });