From 1373a370830f3216557653d0f97aa59ff9b94d7c Mon Sep 17 00:00:00 2001 From: RubaXa Date: Fri, 26 Sep 2014 17:17:31 +0400 Subject: [PATCH 01/30] + 'animation' option and 'create' method --- README.md | 21 +++++++++++--------- Sortable.js | 53 ++++++++++++++++++++++++++++++++++++++++--------- Sortable.min.js | 4 ++-- bower.json | 2 +- component.json | 2 +- package.json | 2 +- 6 files changed, 61 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 64e24c1..b68c89d 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,13 @@ ## Features -* Support touch devices and [modern](http://caniuse.com/#search=drag) browsers -* Built using native HTML5 drag and drop API -* Simple API -* Lightweight, 2KB gzipped -* No jQuery + * Support touch devices and [modern](http://caniuse.com/#search=drag) browsers + * Animation moving items when sorting (css animation) + * Built using native HTML5 drag and drop API + * Simple API + * Lightweight, 2KB gzipped + * No jQuery + ### Usage @@ -20,7 +22,7 @@ ```js var el = document.getElementById('items'); -new Sortable(el); +Sortable.create(el); ``` @@ -29,14 +31,15 @@ new Sortable(el); ### Options ```js -new Sortable(el, { +var sortabel = new Sortable(el, { group: "name", store: null, // @see Store + animation: 150, // msec, animation speed moving items when sorting, `0` — without animation 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 */ }, onEnd: function (/**Event*/evt) { /* dragging */ }, @@ -113,7 +116,7 @@ Saving and restoring of the sort. ``` ```js -new Sortable(el, { +Sortable.create(el, { group: "localStorage-example", store: { /** diff --git a/Sortable.js b/Sortable.js index cd61144..f33e128 100644 --- a/Sortable.js +++ b/Sortable.js @@ -83,7 +83,8 @@ draggable: el.children[0] && el.children[0].nodeName || (/[uo]l/i.test(el.nodeName) ? 'li' : '*'), ghostClass: 'sortable-ghost', ignore: 'a, img', - filter: null + filter: null, + animation: 150 }; // Set default options @@ -339,22 +340,21 @@ if( el.children.length === 0 || el.children[0] === ghostEl || (el === evt.target) && _ghostInBottom(el, evt) ){ el.appendChild(dragEl); } - else if( target && target !== dragEl && (target.parentNode[expando] !== void 0) ){ + else if( target && !target.animated && target !== dragEl && (target.parentNode[expando] !== void 0) ){ if( lastEl !== target ){ lastEl = target; lastCSS = _css(target); - lastRect = target.getBoundingClientRect(); } - var - rect = lastRect - , width = rect.right - rect.left - , height = rect.bottom - rect.top + var dragRect = dragEl.getBoundingClientRect() + , targetRect = target.getBoundingClientRect() + , width = targetRect.right - targetRect.left + , height = targetRect.bottom - targetRect.top , floating = /left|right|inline/.test(lastCSS.cssFloat + lastCSS.display) , isWide = (target.offsetWidth > dragEl.offsetWidth) , isLong = (target.offsetHeight > dragEl.offsetHeight) - , halfway = (floating ? (evt.clientX - rect.left)/width : (evt.clientY - rect.top)/height) > .5 + , halfway = (floating ? (evt.clientX - targetRect.left)/width : (evt.clientY - targetRect.top)/height) > .5 , nextSibling = target.nextElementSibling , after ; @@ -370,13 +370,40 @@ if( after && !nextSibling ){ el.appendChild(dragEl); + this._animate(dragRect, dragEl); } else { target.parentNode.insertBefore(dragEl, after ? nextSibling : target); + this._animate(dragRect, dragEl); + this._animate(targetRect, target); } } } }, + _animate: function (prevRect, target) { + var ms = this.options.animation; + + if (ms) { + var currentRect = target.getBoundingClientRect(); + + _css(target, 'transform', 'translate3d(' + + (prevRect.left - currentRect.left) + 'px,' + + (prevRect.top - currentRect.top) + 'px,0)' + ); + + target.offsetWidth; // repaint + target.animated = true; + + _css(target, 'transition', 'transform ' + ms + 'ms'); + _css(target, 'transform', 'translate3d(0,0,0)'); + + setTimeout(function () { + _css(target, 'transition', ''); + target.animated = false; + }, ms); + } + }, + _offUpEvents: function () { _off(document, 'mouseup', this._onDrop); _off(document, 'touchmove', this._onTouchMove); @@ -680,8 +707,16 @@ }; - Sortable.version = '0.5.1'; + Sortable.version = '0.6.0'; + /** + * Create sortable instance + * @param {HTMLElement} el + * @param {Object} [options] + */ + Sortable.create = function (el, options) { + return new Sortable(el, options) + }; // Export return Sortable; diff --git a/Sortable.min.js b/Sortable.min.js index 3fa8c6c..8f90ebf 100644 --- a/Sortable.min.js +++ b/Sortable.min.js @@ -1,2 +1,2 @@ -/*! Sortable 0.5.1 - 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])},this),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("mousedown"!==a.type||0===a.button){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=[],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.5.1",a}); \ No newline at end of file +/*! 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(),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:150};for(var f in d)c[f]=c[f]||d[f];E.forEach(function(d){c[d]=b(this,c[d]||F),e(a,d.substr(2).toLowerCase(),c[d])},this),a[w]=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),A&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),H.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=G.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(G.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||y,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 y.defaultView&&y.defaultView.getComputedStyle?c=y.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(){B=!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="Sortable"+(new Date).getTime(),x=window,y=x.document,z=x.parseInt,A=!!y.createElement("div").dragDrop,B=!1,C=function(a,b){var c=y.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},D=function(a,b,c){a.dispatchEvent(C(b,c||a))},E="onAdd onUpdate onRemove onStart onEnd onFilter".split(" "),F=function(){},G=[].slice,H=[];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("mousedown"!==a.type||0===a.button){if("function"==typeof k&&k.call(this,f,this))return D(h,"filter",f),void 0;if(k&&(k=k.split(",").filter(function(a){return c(f,a.trim(),h)}),k.length))return D(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){u=a,p=this.el,n=f,q=n.nextSibling,t=this.options.group,n.draggable=!0,g.ignore.split(",").forEach(function(a){i(f,a.trim(),j)}),b&&(u={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(u,!0),a.preventDefault()),e(y,"mouseup",this._onDrop),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(y,"dragover",d);try{y.selection?y.selection.empty():window.getSelection().removeAllRanges()}catch(l){}D(n,"start")}}},_emulateDragOver:function(){if(v){h(o,"display","none");var a=y.elementFromPoint(v.clientX,v.clientY),b=a,c=this.options.group,d=H.length;if(b)do{if(b[w]===c){for(;d--;)H[d]({clientX:v.clientX,clientY:v.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(o,"display","")}},_onTouchMove:function(a){if(u){var b=a.touches[0],c=b.clientX-u.clientX,d=b.clientY-u.clientY,e="translate3d("+c+"px,"+d+"px,0)";v=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-z(g.marginTop,10)),h(o,"left",f.left-z(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(y,"touchmove",this._onTouchMove),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else c.effectAllowed="move",c.setData("Text",n.textContent),e(y,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!B&&t===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.animated&&d!==n&&void 0!==d.parentNode[w]){r!==d&&(r=d,s=h(d));var e,f=n.getBoundingClientRect(),g=d.getBoundingClientRect(),i=g.right-g.left,j=g.bottom-g.top,m=/left|right|inline/.test(s.cssFloat+s.display),p=d.offsetWidth>n.offsetWidth,q=d.offsetHeight>n.offsetHeight,u=(m?(a.clientX-g.left)/i:(a.clientY-g.top)/j)>.5,v=d.nextElementSibling;B=!0,setTimeout(k,30),e=m?d.previousElementSibling===n&&!p||u&&p:v!==n&&!q||u&&q,e&&!v?(b.appendChild(n),this._animate(f,n)):(d.parentNode.insertBefore(n,e?v:d),this._animate(f,n),this._animate(g,d))}}},_animate:function(a,b){var c=this.options.animation;if(c){var d=b.getBoundingClientRect();h(b,"transform","translate3d("+(a.left-d.left)+"px,"+(a.top-d.top)+"px,0)"),b.offsetWidth,b.animated=!0,h(b,"transition","transform "+c+"ms"),h(b,"transform","translate3d(0,0,0)"),setTimeout(function(){h(b,"transition",""),b.animated=!1},c)}},_offUpEvents:function(){f(y,"mouseup",this._onDrop),f(y,"touchmove",this._onTouchMove),f(y,"touchend",this._onDrop),f(y,"touchcancel",this._onDrop)},_onDrop:function(a){clearInterval(this._loopId),f(y,"drop",this._onDrop),f(y,"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&&D(n,"update"):(D(p,"remove",n),D(n,"add")),D(n,"end")),p=n=o=q=u=v=r=s=t=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;E.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")}),H.splice(H.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:C,dispatchEvent:D},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/bower.json b/bower.json index dec25ab..6c98261 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "Sortable", "main": "Sortable.js", - "version": "0.5.1", + "version": "0.6.0", "homepage": "http://rubaxa.github.io/Sortable/", "authors": [ "RubaXa " diff --git a/component.json b/component.json index 9e6184f..8f7638a 100644 --- a/component.json +++ b/component.json @@ -1,7 +1,7 @@ { "name": "Sortable", "main": "Sortable.js", - "version": "0.5.1", + "version": "0.6.0", "homepage": "http://rubaxa.github.io/Sortable/", "repo": "RubaXa/Sortable", "authors": [ diff --git a/package.json b/package.json index 75a9399..7136e65 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sortable", "exportName": "Sortable", - "version": "0.5.1", + "version": "0.6.0", "devDependencies": { "grunt": "*", "grunt-version": "*", From e9a98b2a9648e9531a93269e07c554c1c0669377 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sat, 27 Sep 2014 15:25:20 +0400 Subject: [PATCH 02/30] * anim --- Sortable.js | 9 +++++---- Sortable.min.js | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/Sortable.js b/Sortable.js index f33e128..821078b 100644 --- a/Sortable.js +++ b/Sortable.js @@ -335,10 +335,12 @@ var el = this.el , target = _closest(evt.target, this.options.draggable, el) + , dragRect = dragEl.getBoundingClientRect() ; if( el.children.length === 0 || el.children[0] === ghostEl || (el === evt.target) && _ghostInBottom(el, evt) ){ el.appendChild(dragEl); + this._animate(dragRect, dragEl); } else if( target && !target.animated && target !== dragEl && (target.parentNode[expando] !== void 0) ){ if( lastEl !== target ){ @@ -347,8 +349,7 @@ } - var dragRect = dragEl.getBoundingClientRect() - , targetRect = target.getBoundingClientRect() + var targetRect = target.getBoundingClientRect() , width = targetRect.right - targetRect.left , height = targetRect.bottom - targetRect.top , floating = /left|right|inline/.test(lastCSS.cssFloat + lastCSS.display) @@ -392,12 +393,12 @@ ); target.offsetWidth; // repaint - target.animated = true; _css(target, 'transition', 'transform ' + ms + 'ms'); _css(target, 'transform', 'translate3d(0,0,0)'); - setTimeout(function () { + clearTimeout(target.animated); + target.animated = setTimeout(function () { _css(target, 'transition', ''); target.animated = false; }, ms); diff --git a/Sortable.min.js b/Sortable.min.js index 8f90ebf..5aefe97 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(),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:150};for(var f in d)c[f]=c[f]||d[f];E.forEach(function(d){c[d]=b(this,c[d]||F),e(a,d.substr(2).toLowerCase(),c[d])},this),a[w]=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),A&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),H.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=G.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(G.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||y,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 y.defaultView&&y.defaultView.getComputedStyle?c=y.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(){B=!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="Sortable"+(new Date).getTime(),x=window,y=x.document,z=x.parseInt,A=!!y.createElement("div").dragDrop,B=!1,C=function(a,b){var c=y.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},D=function(a,b,c){a.dispatchEvent(C(b,c||a))},E="onAdd onUpdate onRemove onStart onEnd onFilter".split(" "),F=function(){},G=[].slice,H=[];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("mousedown"!==a.type||0===a.button){if("function"==typeof k&&k.call(this,f,this))return D(h,"filter",f),void 0;if(k&&(k=k.split(",").filter(function(a){return c(f,a.trim(),h)}),k.length))return D(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){u=a,p=this.el,n=f,q=n.nextSibling,t=this.options.group,n.draggable=!0,g.ignore.split(",").forEach(function(a){i(f,a.trim(),j)}),b&&(u={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(u,!0),a.preventDefault()),e(y,"mouseup",this._onDrop),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(y,"dragover",d);try{y.selection?y.selection.empty():window.getSelection().removeAllRanges()}catch(l){}D(n,"start")}}},_emulateDragOver:function(){if(v){h(o,"display","none");var a=y.elementFromPoint(v.clientX,v.clientY),b=a,c=this.options.group,d=H.length;if(b)do{if(b[w]===c){for(;d--;)H[d]({clientX:v.clientX,clientY:v.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(o,"display","")}},_onTouchMove:function(a){if(u){var b=a.touches[0],c=b.clientX-u.clientX,d=b.clientY-u.clientY,e="translate3d("+c+"px,"+d+"px,0)";v=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-z(g.marginTop,10)),h(o,"left",f.left-z(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(y,"touchmove",this._onTouchMove),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else c.effectAllowed="move",c.setData("Text",n.textContent),e(y,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!B&&t===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.animated&&d!==n&&void 0!==d.parentNode[w]){r!==d&&(r=d,s=h(d));var e,f=n.getBoundingClientRect(),g=d.getBoundingClientRect(),i=g.right-g.left,j=g.bottom-g.top,m=/left|right|inline/.test(s.cssFloat+s.display),p=d.offsetWidth>n.offsetWidth,q=d.offsetHeight>n.offsetHeight,u=(m?(a.clientX-g.left)/i:(a.clientY-g.top)/j)>.5,v=d.nextElementSibling;B=!0,setTimeout(k,30),e=m?d.previousElementSibling===n&&!p||u&&p:v!==n&&!q||u&&q,e&&!v?(b.appendChild(n),this._animate(f,n)):(d.parentNode.insertBefore(n,e?v:d),this._animate(f,n),this._animate(g,d))}}},_animate:function(a,b){var c=this.options.animation;if(c){var d=b.getBoundingClientRect();h(b,"transform","translate3d("+(a.left-d.left)+"px,"+(a.top-d.top)+"px,0)"),b.offsetWidth,b.animated=!0,h(b,"transition","transform "+c+"ms"),h(b,"transform","translate3d(0,0,0)"),setTimeout(function(){h(b,"transition",""),b.animated=!1},c)}},_offUpEvents:function(){f(y,"mouseup",this._onDrop),f(y,"touchmove",this._onTouchMove),f(y,"touchend",this._onDrop),f(y,"touchcancel",this._onDrop)},_onDrop:function(a){clearInterval(this._loopId),f(y,"drop",this._onDrop),f(y,"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&&D(n,"update"):(D(p,"remove",n),D(n,"add")),D(n,"end")),p=n=o=q=u=v=r=s=t=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;E.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")}),H.splice(H.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:C,dispatchEvent:D},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(),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:150};for(var f in d)c[f]=c[f]||d[f];E.forEach(function(d){c[d]=b(this,c[d]||F),e(a,d.substr(2).toLowerCase(),c[d])},this),a[w]=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),A&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),H.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=G.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(G.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||y,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 y.defaultView&&y.defaultView.getComputedStyle?c=y.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(){B=!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="Sortable"+(new Date).getTime(),x=window,y=x.document,z=x.parseInt,A=!!y.createElement("div").dragDrop,B=!1,C=function(a,b){var c=y.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},D=function(a,b,c){a.dispatchEvent(C(b,c||a))},E="onAdd onUpdate onRemove onStart onEnd onFilter".split(" "),F=function(){},G=[].slice,H=[];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("mousedown"!==a.type||0===a.button){if("function"==typeof k&&k.call(this,f,this))return D(h,"filter",f),void 0;if(k&&(k=k.split(",").filter(function(a){return c(f,a.trim(),h)}),k.length))return D(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){u=a,p=this.el,n=f,q=n.nextSibling,t=this.options.group,n.draggable=!0,g.ignore.split(",").forEach(function(a){i(f,a.trim(),j)}),b&&(u={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(u,!0),a.preventDefault()),e(y,"mouseup",this._onDrop),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(y,"dragover",d);try{y.selection?y.selection.empty():window.getSelection().removeAllRanges()}catch(l){}D(n,"start")}}},_emulateDragOver:function(){if(v){h(o,"display","none");var a=y.elementFromPoint(v.clientX,v.clientY),b=a,c=this.options.group,d=H.length;if(b)do{if(b[w]===c){for(;d--;)H[d]({clientX:v.clientX,clientY:v.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(o,"display","")}},_onTouchMove:function(a){if(u){var b=a.touches[0],c=b.clientX-u.clientX,d=b.clientY-u.clientY,e="translate3d("+c+"px,"+d+"px,0)";v=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-z(g.marginTop,10)),h(o,"left",f.left-z(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(y,"touchmove",this._onTouchMove),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else c.effectAllowed="move",c.setData("Text",n.textContent),e(y,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!B&&t===this.options.group&&(void 0===a.rootEl||a.rootEl===this.el)){var b=this.el,d=c(a.target,this.options.draggable,b),e=n.getBoundingClientRect();if(0===b.children.length||b.children[0]===o||b===a.target&&l(b,a))b.appendChild(n),this._animate(e,n);else if(d&&!d.animated&&d!==n&&void 0!==d.parentNode[w]){r!==d&&(r=d,s=h(d));var f,g=d.getBoundingClientRect(),i=g.right-g.left,j=g.bottom-g.top,m=/left|right|inline/.test(s.cssFloat+s.display),p=d.offsetWidth>n.offsetWidth,q=d.offsetHeight>n.offsetHeight,u=(m?(a.clientX-g.left)/i:(a.clientY-g.top)/j)>.5,v=d.nextElementSibling;B=!0,setTimeout(k,30),f=m?d.previousElementSibling===n&&!p||u&&p:v!==n&&!q||u&&q,f&&!v?(b.appendChild(n),this._animate(e,n)):(d.parentNode.insertBefore(n,f?v:d),this._animate(e,n),this._animate(g,d))}}},_animate:function(a,b){var c=this.options.animation;if(c){var d=b.getBoundingClientRect();h(b,"transform","translate3d("+(a.left-d.left)+"px,"+(a.top-d.top)+"px,0)"),b.offsetWidth,h(b,"transition","transform "+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(y,"mouseup",this._onDrop),f(y,"touchmove",this._onTouchMove),f(y,"touchend",this._onDrop),f(y,"touchcancel",this._onDrop)},_onDrop:function(a){clearInterval(this._loopId),f(y,"drop",this._onDrop),f(y,"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&&D(n,"update"):(D(p,"remove",n),D(n,"add")),D(n,"end")),p=n=o=q=u=v=r=s=t=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;E.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")}),H.splice(H.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:C,dispatchEvent:D},a.version="0.6.0",a.create=function(b,c){return new a(b,c)},a}); \ No newline at end of file From ab8760e1dedb9b6b24a0864b59ba2b7c0fd1a8fd Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 28 Sep 2014 11:52:26 +0400 Subject: [PATCH 03/30] + animation --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b68c89d..70fd043 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Sortable.create(el); var sortabel = new Sortable(el, { group: "name", store: null, // @see Store - animation: 150, // msec, animation speed moving items when sorting, `0` — without animation + animation: 150, // ms, animation speed moving items when sorting, `0` — without animation 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 From 1340c9e9f6e9970b8b705fca9388c039ccfdc0ce Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 28 Sep 2014 11:52:38 +0400 Subject: [PATCH 04/30] + animation --- index.html | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index cd300fc..c9cc87d 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,9 @@ Sortable. No jQuery. - + - + @@ -128,6 +128,7 @@ new Sortable(bar, { group: "omega" }); // Or var container = document.getElementById("multi"); var sort = new Sortable(container, { + animation: 150, // ms, animation speed moving items when sorting, `0` — without animation handle: ".tile__title", // Restricts sort start click/touch to the specified element draggable: ".tile", // Specifies which items inside the element should be sortable onUpdate: function (evt/**Event*/){ @@ -178,6 +179,7 @@ var editableList = new Sortable(editable, { new Sortable(foo, { group: "words", + animation: 150, store: { get: function (sortable) { var order = localStorage.getItem(sortable.options.group); @@ -198,6 +200,7 @@ var editableList = new Sortable(editable, { new Sortable(bar, { group: "words", + animation: 150, onAdd: function (evt){ console.log('onAdd.bar:', evt.item); }, onUpdate: function (evt){ console.log('onUpdate.bar:', evt.item); }, onRemove: function (evt){ console.log('onRemove.bar:', evt.item); }, @@ -207,12 +210,14 @@ var editableList = new Sortable(editable, { new Sortable(multi, { + animation: 150, draggable: '.tile', handle: '.tile__name' }); var editableList = new Sortable(editable, { + animation: 150, filter: '.js-remove', onFilter: function (evt) { var el = editableList.closest(evt.item); @@ -234,7 +239,10 @@ var editableList = new Sortable(editable, { [].forEach.call(multi.getElementsByClassName('tile__list'), function (el){ - new Sortable(el, { group: 'photo' }); + new Sortable(el, { + group: 'photo', + animation: 150 + }); }); })(); From 8f029c395501a959c8f6739520bb7b3e7cb1ec48 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 28 Sep 2014 11:53:21 +0400 Subject: [PATCH 05/30] #96: + 'webkit' prefix --- Sortable.js | 22 +++++++++++++++------- Sortable.min.js | 2 +- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/Sortable.js b/Sortable.js index 821078b..356a810 100644 --- a/Sortable.js +++ b/Sortable.js @@ -28,7 +28,6 @@ , lastEl , lastCSS - , lastRect , activeGroup @@ -84,7 +83,7 @@ ghostClass: 'sortable-ghost', ignore: 'a, img', filter: null, - animation: 150 + animation: 0 }; // Set default options @@ -387,6 +386,7 @@ if (ms) { var currentRect = target.getBoundingClientRect(); + _css(target, 'transition', 'none'); _css(target, 'transform', 'translate3d(' + (prevRect.left - currentRect.left) + 'px,' + (prevRect.top - currentRect.top) + 'px,0)' @@ -394,7 +394,7 @@ target.offsetWidth; // repaint - _css(target, 'transition', 'transform ' + ms + 'ms'); + _css(target, 'transition', 'all ' + ms + 'ms'); _css(target, 'transform', 'translate3d(0,0,0)'); clearTimeout(target.animated); @@ -628,7 +628,9 @@ function _css(el, prop, val){ - if( el && el.style ){ + var style = el && el.style; + + if( style ){ if( val === void 0 ){ if( document.defaultView && document.defaultView.getComputedStyle ){ val = document.defaultView.getComputedStyle(el, ''); @@ -636,9 +638,15 @@ else if( el.currentStyle ){ val = el.currentStyle; } - return prop === void 0 ? val : val[prop]; - } else { - el.style[prop] = val + (typeof val === 'string' ? '' : 'px'); + + return prop === void 0 ? val : val[prop]; + } + else { + if (!(prop in style)) { + prop = '-webkit-' + prop; + } + + style[prop] = val + (typeof val === 'string' ? '' : 'px'); } } } diff --git a/Sortable.min.js b/Sortable.min.js index 5aefe97..fb8f2f6 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(),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:150};for(var f in d)c[f]=c[f]||d[f];E.forEach(function(d){c[d]=b(this,c[d]||F),e(a,d.substr(2).toLowerCase(),c[d])},this),a[w]=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),A&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),H.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=G.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(G.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||y,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 y.defaultView&&y.defaultView.getComputedStyle?c=y.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(){B=!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="Sortable"+(new Date).getTime(),x=window,y=x.document,z=x.parseInt,A=!!y.createElement("div").dragDrop,B=!1,C=function(a,b){var c=y.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},D=function(a,b,c){a.dispatchEvent(C(b,c||a))},E="onAdd onUpdate onRemove onStart onEnd onFilter".split(" "),F=function(){},G=[].slice,H=[];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("mousedown"!==a.type||0===a.button){if("function"==typeof k&&k.call(this,f,this))return D(h,"filter",f),void 0;if(k&&(k=k.split(",").filter(function(a){return c(f,a.trim(),h)}),k.length))return D(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){u=a,p=this.el,n=f,q=n.nextSibling,t=this.options.group,n.draggable=!0,g.ignore.split(",").forEach(function(a){i(f,a.trim(),j)}),b&&(u={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(u,!0),a.preventDefault()),e(y,"mouseup",this._onDrop),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(y,"dragover",d);try{y.selection?y.selection.empty():window.getSelection().removeAllRanges()}catch(l){}D(n,"start")}}},_emulateDragOver:function(){if(v){h(o,"display","none");var a=y.elementFromPoint(v.clientX,v.clientY),b=a,c=this.options.group,d=H.length;if(b)do{if(b[w]===c){for(;d--;)H[d]({clientX:v.clientX,clientY:v.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(o,"display","")}},_onTouchMove:function(a){if(u){var b=a.touches[0],c=b.clientX-u.clientX,d=b.clientY-u.clientY,e="translate3d("+c+"px,"+d+"px,0)";v=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-z(g.marginTop,10)),h(o,"left",f.left-z(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(y,"touchmove",this._onTouchMove),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else c.effectAllowed="move",c.setData("Text",n.textContent),e(y,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!B&&t===this.options.group&&(void 0===a.rootEl||a.rootEl===this.el)){var b=this.el,d=c(a.target,this.options.draggable,b),e=n.getBoundingClientRect();if(0===b.children.length||b.children[0]===o||b===a.target&&l(b,a))b.appendChild(n),this._animate(e,n);else if(d&&!d.animated&&d!==n&&void 0!==d.parentNode[w]){r!==d&&(r=d,s=h(d));var f,g=d.getBoundingClientRect(),i=g.right-g.left,j=g.bottom-g.top,m=/left|right|inline/.test(s.cssFloat+s.display),p=d.offsetWidth>n.offsetWidth,q=d.offsetHeight>n.offsetHeight,u=(m?(a.clientX-g.left)/i:(a.clientY-g.top)/j)>.5,v=d.nextElementSibling;B=!0,setTimeout(k,30),f=m?d.previousElementSibling===n&&!p||u&&p:v!==n&&!q||u&&q,f&&!v?(b.appendChild(n),this._animate(e,n)):(d.parentNode.insertBefore(n,f?v:d),this._animate(e,n),this._animate(g,d))}}},_animate:function(a,b){var c=this.options.animation;if(c){var d=b.getBoundingClientRect();h(b,"transform","translate3d("+(a.left-d.left)+"px,"+(a.top-d.top)+"px,0)"),b.offsetWidth,h(b,"transition","transform "+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(y,"mouseup",this._onDrop),f(y,"touchmove",this._onTouchMove),f(y,"touchend",this._onDrop),f(y,"touchcancel",this._onDrop)},_onDrop:function(a){clearInterval(this._loopId),f(y,"drop",this._onDrop),f(y,"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&&D(n,"update"):(D(p,"remove",n),D(n,"add")),D(n,"end")),p=n=o=q=u=v=r=s=t=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;E.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")}),H.splice(H.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:C,dispatchEvent:D},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(),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];E.forEach(function(d){c[d]=b(this,c[d]||F),e(a,d.substr(2).toLowerCase(),c[d])},this),a[w]=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),A&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),H.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=G.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(G.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||y,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 y.defaultView&&y.defaultView.getComputedStyle?c=y.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(){B=!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="Sortable"+(new Date).getTime(),x=window,y=x.document,z=x.parseInt,A=!!y.createElement("div").dragDrop,B=!1,C=function(a,b){var c=y.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},D=function(a,b,c){a.dispatchEvent(C(b,c||a))},E="onAdd onUpdate onRemove onStart onEnd onFilter".split(" "),F=function(){},G=[].slice,H=[];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("mousedown"!==a.type||0===a.button){if("function"==typeof k&&k.call(this,f,this))return D(h,"filter",f),void 0;if(k&&(k=k.split(",").filter(function(a){return c(f,a.trim(),h)}),k.length))return D(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){u=a,p=this.el,n=f,q=n.nextSibling,t=this.options.group,n.draggable=!0,g.ignore.split(",").forEach(function(a){i(f,a.trim(),j)}),b&&(u={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(u,!0),a.preventDefault()),e(y,"mouseup",this._onDrop),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(y,"dragover",d);try{y.selection?y.selection.empty():window.getSelection().removeAllRanges()}catch(l){}D(n,"start")}}},_emulateDragOver:function(){if(v){h(o,"display","none");var a=y.elementFromPoint(v.clientX,v.clientY),b=a,c=this.options.group,d=H.length;if(b)do{if(b[w]===c){for(;d--;)H[d]({clientX:v.clientX,clientY:v.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(o,"display","")}},_onTouchMove:function(a){if(u){var b=a.touches[0],c=b.clientX-u.clientX,d=b.clientY-u.clientY,e="translate3d("+c+"px,"+d+"px,0)";v=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-z(g.marginTop,10)),h(o,"left",f.left-z(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(y,"touchmove",this._onTouchMove),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else c.effectAllowed="move",c.setData("Text",n.textContent),e(y,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!B&&t===this.options.group&&(void 0===a.rootEl||a.rootEl===this.el)){var b=this.el,d=c(a.target,this.options.draggable,b),e=n.getBoundingClientRect();if(0===b.children.length||b.children[0]===o||b===a.target&&l(b,a))b.appendChild(n),this._animate(e,n);else if(d&&!d.animated&&d!==n&&void 0!==d.parentNode[w]){r!==d&&(r=d,s=h(d));var f,g=d.getBoundingClientRect(),i=g.right-g.left,j=g.bottom-g.top,m=/left|right|inline/.test(s.cssFloat+s.display),p=d.offsetWidth>n.offsetWidth,q=d.offsetHeight>n.offsetHeight,u=(m?(a.clientX-g.left)/i:(a.clientY-g.top)/j)>.5,v=d.nextElementSibling;B=!0,setTimeout(k,30),f=m?d.previousElementSibling===n&&!p||u&&p:v!==n&&!q||u&&q,f&&!v?(b.appendChild(n),this._animate(e,n)):(d.parentNode.insertBefore(n,f?v:d),this._animate(e,n),this._animate(g,d))}}},_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(y,"mouseup",this._onDrop),f(y,"touchmove",this._onTouchMove),f(y,"touchend",this._onDrop),f(y,"touchcancel",this._onDrop)},_onDrop:function(a){clearInterval(this._loopId),f(y,"drop",this._onDrop),f(y,"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&&D(n,"update"):(D(p,"remove",n),D(n,"add")),D(n,"end")),p=n=o=q=u=v=r=s=t=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;E.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")}),H.splice(H.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:C,dispatchEvent:D},a.version="0.6.0",a.create=function(b,c){return new a(b,c)},a}); \ No newline at end of file From 9213913619c5ec02fdf81438d8e91828b0d16895 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sat, 8 Nov 2014 22:09:08 +0300 Subject: [PATCH 06/30] + group (name, pull, put), sort options --- README.md | 4 +++- Sortable.js | 61 ++++++++++++++++++++++++++++++++++++++++--------- Sortable.min.js | 2 +- index.html | 58 ++++++++++++++++++++++++++++++++++++++++++++++ st/app.css | 6 +++++ 5 files changed, 118 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 70fd043..5e17cb2 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,8 @@ Sortable.create(el); ### Options ```js var sortabel = new Sortable(el, { - group: "name", + group: "name", // or { name: "..", pull: [true, false, clone], put: true } + sort: true, // sorting inside list store: null, // @see Store animation: 150, // ms, animation speed moving items when sorting, `0` — without animation handle: ".my-handle", // Restricts sort start click/touch to the specified element @@ -160,6 +161,7 @@ Sortable.create(el, { * toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — add or remove one classes from each element + --- diff --git a/Sortable.js b/Sortable.js index bea174a..4c47563 100644 --- a/Sortable.js +++ b/Sortable.js @@ -23,6 +23,7 @@ var dragEl , ghostEl + , cloneEl , rootEl , nextEl @@ -74,9 +75,10 @@ this.options = options = (options || {}); - // Defaults + // Default options var defaults = { group: Math.random(), + sort: true, store: null, handle: null, draggable: el.children[0] && el.children[0].nodeName || (/[uo]l/i.test(el.nodeName) ? 'li' : '*'), @@ -86,12 +88,24 @@ animation: 0 }; + // Set default options for (var name in defaults) { options[name] = options[name] || defaults[name]; } + if (!options.group.name) { + options.group = { name: options.group }; + } + + ['pull', 'put'].forEach(function (key) { + if (!(key in options.group)) { + options.group[key] = true; + } + }); + + // Define events _customEvents.forEach(function (name) { options[name] = _bind(this, options[name] || noop); @@ -100,7 +114,7 @@ // Export group name - el[expando] = options.group; + el[expando] = options.group.name; // Bind all private methods @@ -187,6 +201,10 @@ nextEl = dragEl.nextSibling; activeGroup = this.options.group; + cloneEl = dragEl.cloneNode(true); + _css(cloneEl, 'display', 'none'); + rootEl.insertBefore(cloneEl, dragEl); + dragEl.draggable = true; // Disable "draggable" @@ -235,13 +253,13 @@ var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY) , parent = target - , group = this.options.group + , groupName = this.options.group.name , i = touchDragOverListeners.length ; if( parent ){ do { - if( parent[expando] === group ){ + if( parent[expando] === groupName ){ while( i-- ){ touchDragOverListeners[i]({ clientX: touchEvt.clientX, @@ -332,12 +350,32 @@ _onDragOver: function (evt/**Event*/){ - if( !_silent && (activeGroup === this.options.group) && (evt.rootEl === void 0 || evt.rootEl === this.el) ){ - var - el = this.el - , target = _closest(evt.target, this.options.draggable, el) - , dragRect = dragEl.getBoundingClientRect() - ; + var el = this.el, + target, + dragRect, + revert, + options = this.options, + group = options.group, + isOwner = (activeGroup === group); + + if( !_silent && + (activeGroup.name === group.name) && + (isOwner && (options.sort || (revert = !rootEl.contains(dragEl))) || group.put && activeGroup.pull) && + (evt.rootEl === void 0 || evt.rootEl === this.el) + ){ + target = _closest(evt.target, this.options.draggable, el); + dragRect = dragEl.getBoundingClientRect(); + + if ((activeGroup.pull == 'clone') && (cloneEl.state !== isOwner)) { + _css(cloneEl, 'display', isOwner ? 'none' : ''); + !isOwner && cloneEl.state && rootEl.insertBefore(cloneEl, dragEl); + cloneEl.state = isOwner; + } + + if (revert) { + rootEl.insertBefore(dragEl, cloneEl); + return; + } if( el.children.length === 0 || el.children[0] === ghostEl || (el === evt.target) && _ghostInBottom(el, evt) ){ el.appendChild(dragEl); @@ -459,6 +497,7 @@ dragEl = ghostEl = nextEl = + cloneEl = tapEvt = touchEvt = @@ -719,7 +758,7 @@ Sortable.version = '0.6.0'; - + /** * Create sortable instance diff --git a/Sortable.min.js b/Sortable.min.js index 2a1c54c..0da18e2 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(),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];E.forEach(function(d){c[d]=b(this,c[d]||F),e(a,d.substr(2).toLowerCase(),c[d])},this),a[w]=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),A&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),H.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=G.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(G.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||y,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 y.defaultView&&y.defaultView.getComputedStyle?c=y.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(){B=!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="Sortable"+(new Date).getTime(),x=window,y=x.document,z=x.parseInt,A=!!y.createElement("div").dragDrop,B=!1,C=function(a,b){var c=y.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},D=function(a,b,c){a.dispatchEvent(C(b,c||a))},E="onAdd onUpdate onRemove onStart onEnd onFilter".split(" "),F=function(){},G=[].slice,H=[];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("mousedown"!==a.type||0===a.button){if("function"==typeof k){if(k.call(this,f,this))return D(h,"filter",f),void 0}else if(k&&(k=k.split(",").filter(function(a){return c(f,a.trim(),h)}),k.length))return D(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){u=a,p=this.el,n=f,q=n.nextSibling,t=this.options.group,n.draggable=!0,g.ignore.split(",").forEach(function(a){i(f,a.trim(),j)}),b&&(u={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(u,!0),a.preventDefault()),e(y,"mouseup",this._onDrop),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(y,"dragover",d);try{y.selection?y.selection.empty():window.getSelection().removeAllRanges()}catch(l){}D(n,"start")}}},_emulateDragOver:function(){if(v){h(o,"display","none");var a=y.elementFromPoint(v.clientX,v.clientY),b=a,c=this.options.group,d=H.length;if(b)do{if(b[w]===c){for(;d--;)H[d]({clientX:v.clientX,clientY:v.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(o,"display","")}},_onTouchMove:function(a){if(u){var b=a.touches[0],c=b.clientX-u.clientX,d=b.clientY-u.clientY,e="translate3d("+c+"px,"+d+"px,0)";v=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-z(g.marginTop,10)),h(o,"left",f.left-z(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(y,"touchmove",this._onTouchMove),e(y,"touchend",this._onDrop),e(y,"touchcancel",this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else c.effectAllowed="move",c.setData("Text",n.textContent),e(y,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!B&&t===this.options.group&&(void 0===a.rootEl||a.rootEl===this.el)){var b=this.el,d=c(a.target,this.options.draggable,b),e=n.getBoundingClientRect();if(0===b.children.length||b.children[0]===o||b===a.target&&l(b,a))b.appendChild(n),this._animate(e,n);else if(d&&!d.animated&&d!==n&&void 0!==d.parentNode[w]){r!==d&&(r=d,s=h(d));var f,g=d.getBoundingClientRect(),i=g.right-g.left,j=g.bottom-g.top,m=/left|right|inline/.test(s.cssFloat+s.display),p=d.offsetWidth>n.offsetWidth,q=d.offsetHeight>n.offsetHeight,u=(m?(a.clientX-g.left)/i:(a.clientY-g.top)/j)>.5,v=d.nextElementSibling;B=!0,setTimeout(k,30),f=m?d.previousElementSibling===n&&!p||u&&p:v!==n&&!q||u&&q,f&&!v?(b.appendChild(n),this._animate(e,n)):(d.parentNode.insertBefore(n,f?v:d),this._animate(e,n),this._animate(g,d))}}},_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(y,"mouseup",this._onDrop),f(y,"touchmove",this._onTouchMove),f(y,"touchend",this._onDrop),f(y,"touchcancel",this._onDrop)},_onDrop:function(a){clearInterval(this._loopId),f(y,"drop",this._onDrop),f(y,"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&&D(n,"update"):(D(p,"remove",n),D(n,"add")),D(n,"end")),p=n=o=q=u=v=r=s=t=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;E.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")}),H.splice(H.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:C,dispatchEvent:D},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)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 diff --git a/index.html b/index.html index c9cc87d..04ea47e 100644 --- a/index.html +++ b/index.html @@ -108,6 +108,43 @@ + +
+
+
Advanced groups
+ +
+
pull & put
+
    +
  • Meet
    • +
  • Potato
    • +
  • Tea
    • +
+
+ +
+
only pull (clone)
+
    +
  • Sex
    • +
  • Drags
    • +
  • Rock'n'roll
    • +
+
+ +
+
only put
+
    +
  • Money
    • +
  • Force
    • +
  • Agility
    • +
+
+ +
+
+
+ +
@@ -244,6 +281,27 @@ var editableList = new Sortable(editable, { animation: 150 }); }); + + + [{ + name: 'advanced', + pull: true, + put: true + }, + { + name: 'advanced', + pull: 'clone', + put: false + }, { + name: 'advanced', + pull: false, + put: true + }].forEach(function (opts, i) { + new Sortable(document.getElementById(opts.name + '-' + (i + 1)), { + group: opts, + animation: 150 + }); + }); })(); diff --git a/st/app.css b/st/app.css index 48d1a0e..45e1bae 100644 --- a/st/app.css +++ b/st/app.css @@ -126,6 +126,12 @@ img { margin-left: 5px; background-color: #fff; } + .block__list-title { + margin: -20px 0 0; + padding: 10px; + text-align: center; + background: #5F9EDF; + } .block__list li { cursor: move; } .block__list_words li { From eef660d2bbbeb5288a62b005a3fc842b03e53f56 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sat, 8 Nov 2014 22:18:40 +0300 Subject: [PATCH 07/30] * fixed 'sort' option --- Sortable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sortable.js b/Sortable.js index 4c47563..a18f95c 100644 --- a/Sortable.js +++ b/Sortable.js @@ -91,7 +91,7 @@ // Set default options for (var name in defaults) { - options[name] = options[name] || defaults[name]; + !(name in options) && (options[name] = defaults[name]); } From 8a4bff0ac60bfc7903f9fcf4743bc9dfc9ff73fb Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sat, 8 Nov 2014 22:44:00 +0300 Subject: [PATCH 08/30] =?UTF-8?q?*=20group.put=20=E2=80=94=20can=20be=20an?= =?UTF-8?q?=20array?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 +++++++++++- Sortable.js | 8 ++++++-- Sortable.min.js | 2 +- index.html | 2 +- 4 files changed, 19 insertions(+), 5 deletions(-) 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 }); From 6fd307a889b4f68c3a4d3c1e100ae92f9b96cb93 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 9 Nov 2014 01:27:38 +0300 Subject: [PATCH 09/30] * fixed _onDrop --- Sortable.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Sortable.js b/Sortable.js index 1681aff..7e6c502 100644 --- a/Sortable.js +++ b/Sortable.js @@ -472,6 +472,7 @@ evt.stopPropagation(); if( ghostEl ){ + cloneEl.parentNode.removeChild(cloneEl); ghostEl.parentNode.removeChild(ghostEl); } @@ -494,8 +495,6 @@ _dispatchEvent(dragEl, 'end'); } - cloneEl.parentNode.removeChild(cloneEl); - // Set NULL rootEl = dragEl = From 21f8121351b20bd800eb5283589a35d040b017d4 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 9 Nov 2014 01:31:50 +0300 Subject: [PATCH 10/30] * fixed _onDrop, II --- Sortable.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/Sortable.js b/Sortable.js index 7e6c502..dba2f74 100644 --- a/Sortable.js +++ b/Sortable.js @@ -471,10 +471,8 @@ evt.preventDefault(); evt.stopPropagation(); - if( ghostEl ){ - cloneEl.parentNode.removeChild(cloneEl); - ghostEl.parentNode.removeChild(ghostEl); - } + cloneEl.parentNode.removeChild(cloneEl); + ghostEl && ghostEl.parentNode.removeChild(ghostEl); if( dragEl ){ _disableDraggable(dragEl); From 2073491aa7df776582585816d43902cb4bd1a298 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 9 Nov 2014 01:59:31 +0300 Subject: [PATCH 11/30] * start event --- Sortable.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/Sortable.js b/Sortable.js index dba2f74..09a210f 100644 --- a/Sortable.js +++ b/Sortable.js @@ -202,10 +202,6 @@ nextEl = dragEl.nextSibling; activeGroup = this.options.group; - cloneEl = dragEl.cloneNode(true); - _css(cloneEl, 'display', 'none'); - rootEl.insertBefore(cloneEl, dragEl); - dragEl.draggable = true; // Disable "draggable" @@ -244,6 +240,11 @@ _dispatchEvent(dragEl, 'start'); + + + cloneEl = dragEl.cloneNode(true); + _css(cloneEl, 'display', 'none'); + rootEl.insertBefore(cloneEl, dragEl); } }, From f2953597d77b44c0e36cef7cc1ca725d76c2bab7 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 9 Nov 2014 02:32:37 +0300 Subject: [PATCH 12/30] * fixed animation --- Sortable.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/Sortable.js b/Sortable.js index 09a210f..b38ad89 100644 --- a/Sortable.js +++ b/Sortable.js @@ -380,9 +380,14 @@ return; } - if( el.children.length === 0 || el.children[0] === ghostEl || (el === evt.target) && _ghostInBottom(el, evt) ){ + if( (el.children.length === 0) || (el.children[0] === ghostEl) || + (el === evt.target) && _ghostInBottom(el, evt) + ){ + target && (targetRect = target.getBoundingClientRect()); + el.appendChild(dragEl); this._animate(dragRect, dragEl); + target && this._animate(targetRect, target); } else if( target && !target.animated && target !== dragEl && (target.parentNode[expando] !== void 0) ){ if( lastEl !== target ){ @@ -413,12 +418,12 @@ if( after && !nextSibling ){ el.appendChild(dragEl); - this._animate(dragRect, dragEl); } else { target.parentNode.insertBefore(dragEl, after ? nextSibling : target); - this._animate(dragRect, dragEl); - this._animate(targetRect, target); } + + this._animate(dragRect, dragEl); + this._animate(targetRect, target); } } }, From 293b88c0594db9a83d10a7e4f038a1668f843ee2 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 9 Nov 2014 02:32:45 +0300 Subject: [PATCH 13/30] * fixed animation --- Sortable.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sortable.min.js b/Sortable.min.js index bc9314e..f56348f 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)!(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 +!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,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"),p=n.cloneNode(!0),h(p,"display","none"),q.insertBefore(p,n)}}},_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))b&&(v=b.getBoundingClientRect()),f.appendChild(n),this._animate(d,n),b&&this._animate(v,b);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):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(),p.parentNode.removeChild(p),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 From 164f837e404d6a602b9a1d70db54ff1e60191328 Mon Sep 17 00:00:00 2001 From: RubaXa Date: Sun, 9 Nov 2014 12:50:28 +0300 Subject: [PATCH 14/30] + onSort; * fixed onEnd; + Support AngularJS --- README.md | 42 ++++++++++++++++++ Sortable.js | 28 ++++++------ Sortable.min.js | 2 +- index.html | 96 +++++++++++++++++++++++++++++++++++++++- ng-sortable.js | 115 ++++++++++++++++++++++++++++++++++++++++++++++++ st/app.css | 9 ++++ 6 files changed, 276 insertions(+), 16 deletions(-) create mode 100644 ng-sortable.js diff --git a/README.md b/README.md index 64b4552..2171404 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ * Support touch devices and [modern](http://caniuse.com/#search=drag) browsers * Animation moving items when sorting (css animation) * Built using native HTML5 drag and drop API + * Support [AngularJS](#ng) * Simple API * Lightweight, 2KB gzipped * No jQuery @@ -44,14 +45,23 @@ var sortabel = new Sortable(el, { onStart: function (/**Event*/evt) { /* dragging */ }, onEnd: function (/**Event*/evt) { /* dragging */ }, + // Element is added to the list onAdd: function (/**Event*/evt){ var itemEl = evt.item; // dragged HTMLElement + itemEl.from; // previous list }, + // Changed sorting in list onUpdate: function (/**Event*/evt){ var itemEl = evt.item; // dragged HTMLElement }, + // Called by any change to the list (add / update / remove) + onSort: function (/**Event*/evt){ + var itemEl = evt.item; // dragged HTMLElement + }, + + // The element is removed from the list onRemove: function (/**Event*/evt){ var itemEl = evt.item; // dragged HTMLElement }, @@ -74,6 +84,38 @@ var sortabel = new Sortable(el, { --- + +### Support AngularJS +Include [ng-sortable.js](ng-sortable.js) + +```html +
+
    +
  • {{item}}
    • +
+ +
    +
  • {{item}}
    • +
+ +
    +
  • {{item}}
    • +
+
+``` + + +```js +angular.module('myApp', ['ng-sortable']) + .controller(function () { + this.items = ['item 1', 'item 2']; + this.foo = ['foo 1', '..']; + this.bar = ['bar 1', '..']; + this.barConfig = { group: 'foobar', animation: 150 }; + }); +``` + +--- ### Method diff --git a/Sortable.js b/Sortable.js index b38ad89..524e118 100644 --- a/Sortable.js +++ b/Sortable.js @@ -44,18 +44,17 @@ , _silent = false - , _createEvent = function (event/**String*/, item/**HTMLElement*/){ + , _dispatchEvent = function (rootEl, name, targetEl, fromEl) { var evt = document.createEvent('Event'); - evt.initEvent(event, true, true); - evt.item = item; - return evt; - } - , _dispatchEvent = function (rootEl, name, targetEl) { - rootEl.dispatchEvent(_createEvent(name, targetEl || rootEl)); + evt.initEvent(name, true, true); + evt.item = targetEl || rootEl; + evt.from = fromEl || rootEl; + + rootEl.dispatchEvent(evt); } - , _customEvents = 'onAdd onUpdate onRemove onStart onEnd onFilter'.split(' ') + , _customEvents = 'onAdd onUpdate onRemove onStart onEnd onFilter onSort'.split(' ') , noop = function (){} , slice = [].slice @@ -485,18 +484,22 @@ _toggleClass(dragEl, this.options.ghostClass, false); if( !rootEl.contains(dragEl) ){ - // Remove event - _dispatchEvent(rootEl, 'remove', dragEl); + _dispatchEvent(dragEl, 'sort'); + _dispatchEvent(rootEl, 'sort'); // Add event - _dispatchEvent(dragEl, 'add'); + _dispatchEvent(dragEl, 'add', dragEl, rootEl); + + // Remove event + _dispatchEvent(rootEl, 'remove', dragEl); } else if( dragEl.nextSibling !== nextEl ){ // Update event _dispatchEvent(dragEl, 'update'); + _dispatchEvent(dragEl, 'sort'); } - _dispatchEvent(dragEl, 'end'); + _dispatchEvent(rootEl, 'end'); } // Set NULL @@ -759,7 +762,6 @@ bind: _bind, closest: _closest, toggleClass: _toggleClass, - createEvent: _createEvent, dispatchEvent: _dispatchEvent }; diff --git a/Sortable.min.js b/Sortable.min.js index f56348f..ad51aa5 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)!(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,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"),p=n.cloneNode(!0),h(p,"display","none"),q.insertBefore(p,n)}}},_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))b&&(v=b.getBoundingClientRect()),f.appendChild(n),this._animate(d,n),b&&this._animate(v,b);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):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(),p.parentNode.removeChild(p),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)}),E.forEach(function(d){c[d]=b(this,c[d]||F),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),H.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=G.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(G.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,c,d){var e=z.createEvent("Event");e.initEvent(b,!0,!0),e.item=c||a,e.from=d||a,a.dispatchEvent(e)},E="onAdd onUpdate onRemove onStart onEnd onFilter onSort".split(" "),F=function(){},G=[].slice,H=[];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 D(k,"filter",f),void 0}else if(l&&(l=l.split(",").filter(function(a){return c(f,a.trim(),k)}),l.length))return D(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,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){}D(n,"start"),p=n.cloneNode(!0),h(p,"display","none"),q.insertBefore(p,n)}}},_emulateDragOver:function(){if(w){h(o,"display","none");var a=z.elementFromPoint(w.clientX,w.clientY),b=a,c=this.options.group.name,d=H.length;if(b)do{if(b[x]===c){for(;d--;)H[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))b&&(v=b.getBoundingClientRect()),f.appendChild(n),this._animate(d,n),b&&this._animate(v,b);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):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(),p.parentNode.removeChild(p),o&&o.parentNode.removeChild(o),n&&(j(n),g(n,this.options.ghostClass,!1),q.contains(n)?n.nextSibling!==r&&(D(n,"update"),D(n,"sort")):(D(n,"sort"),D(q,"sort"),D(n,"add",n,q),D(q,"remove",n)),D(q,"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;E.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")}),H.splice(H.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,dispatchEvent:D},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 7d0e030..f5b93c4 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,8 @@ Sortable. No jQuery. - - + + @@ -145,6 +145,47 @@
+ +
+
+
AngluarJS
+ +
+
+ {{remaining()}} of {{todos.length}} remaining + [ archive ] +
    +
  • + + {{todo.text}} +
    • +
+
+ +
+
+
+ + +
+
+ {{remaining()}} of {{todos.length}} remaining +
    +
  • + + {{todo.text}} +
    • +
+
+
+ +
+
+
+ + +
@@ -202,6 +243,8 @@ var editableList = new Sortable(editable, { + +