diff --git a/Gruntfile.js b/Gruntfile.js index a6201f6..672b7b9 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,7 +5,7 @@ module.exports = function (grunt){ pkg: grunt.file.readJSON('package.json'), version: { - src: ['<%= pkg.exportName %>.js', 'bower.json'] + src: ['<%= pkg.exportName %>.js', '*.json'] }, uglify: { diff --git a/README.md b/README.md index d8e17da..b1a2094 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,7 @@ new Sortable(items); ```js new Sortable(elem, { group: "name", + store: null, // @see Store handle: ".my-handle", // Restricts sort start click/touch to the specified element draggable: ".item", // Specifies which items inside the element should be sortable ghostClass: "sortable-ghost", @@ -54,6 +55,49 @@ new Sortable(elem, { ``` +### Method + +##### toArray():`String[]` +Serializes the sortable's item data-id's into an array of string. + + +##### sort(order:`Array`) +Sorts the elements according to the array. +```js + var order = sortable.toArray(); + sortable.sort(order.reverse()); // apply +``` + + +##### destroy() + + +--- + + +### Store +Saving and restoring of the sort. + +```js +new Sortable(el, { + group: "localStorage-example", + store: { + + get: function (sortable) { + var order = localStorage.getItem(sortable.options.group); + return order ? order.split('|') : []; + }, + + set: function (sortable) { + var order = sortable.toArray(); + localStorage.setItem(sortable.options.group, order.join('|')); + } + } +}) +``` + + + --- diff --git a/Sortable.js b/Sortable.js index d56ff75..cee6745 100644 --- a/Sortable.js +++ b/Sortable.js @@ -63,11 +63,11 @@ ; + /** * @class Sortable * @param {HTMLElement} el - * @param {Object} [options] - * @constructor + * @param {Object} [options] */ function Sortable(el, options){ this.el = el; // root element @@ -76,6 +76,7 @@ // Defaults options.group = options.group || Math.random(); + options.store = options.store || null; options.handle = options.handle || null; options.draggable = options.draggable || el.children[0] && el.children[0].nodeName || (/[uo]l/i.test(el.nodeName) ? 'li' : '*'); options.ghostClass = options.ghostClass || 'sortable-ghost'; @@ -131,10 +132,13 @@ _css(el, '-ms-touch-action', 'none'); touchDragOverListeners.push(this._onDragOver); + + // Restore sorting + options.store && this.sort(options.store.get(this)); } - Sortable.prototype = { + Sortable.prototype = /** @lends Sortable.prototype */ { constructor: Sortable, @@ -406,6 +410,7 @@ // Update event dragEl.dispatchEvent(_createEvent('update', dragEl)); } + dragEl.dispatchEvent(_createEvent('stop', dragEl)); } @@ -422,11 +427,58 @@ lastCSS = activeGroup = null; + + // Save sorting + this.options.store && this.options.store.set(this); } }, - destroy: function (){ + /** + * Serializes the item into an array of string. + * @returns {String[]} + */ + toArray: function () { + var order = [], + el, + children = this.el.children, + i = 0, + n = children.length + ; + + for (; i < n; i++) { + el = children[i]; + order.push(el.getAttribute('data-id') || _generateId(el)); + } + + return order; + }, + + + /** + * Sorts the elements according to the array. + * @param {String[]} order order of the items + */ + sort: function (order) { + var items = {}, el = this.el; + + this.toArray().forEach(function (id, i) { + items[id] = el.children[i]; + }); + + order.forEach(function (id) { + if (items[id]) { + el.removeChild(items[id]); + el.appendChild(items[id]); + } + }); + }, + + + /** + * Destroy + */ + destroy: function () { var el = this.el, options = this.options; _off(el, 'add', options.onAdd); @@ -455,6 +507,7 @@ } }; + function _bind(ctx, fn){ var args = slice.call(arguments, 2); return fn.bind ? fn.bind.apply(fn, [ctx].concat(args)) : function (){ @@ -567,6 +620,23 @@ } + /** + * Generate id + * @param {HTMLElement} el + * @returns {String} + * @private + */ + function _generateId(el) { + var str = el.innerHTML + el.className + el.src, + i = str.length, + sum = 0 + ; + while (i--) { + sum += str.charCodeAt(i); + } + return sum.toString(36); + } + // Export utils Sortable.utils = { @@ -580,7 +650,8 @@ }; - Sortable.version = '0.3.0'; + Sortable.version = '0.4.0'; + // Export return Sortable; diff --git a/Sortable.min.js b/Sortable.min.js index 8326000..5fe09f6 100644 --- a/Sortable.min.js +++ b/Sortable.min.js @@ -1,2 +1,2 @@ -/*! Sortable 0.3.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||{},c.group=c.group||Math.random(),c.handle=c.handle||null,c.draggable=c.draggable||a.children[0]&&a.children[0].nodeName||(/[uo]l/i.test(a.nodeName)?"li":"*"),c.ghostClass=c.ghostClass||"sortable-ghost",c.ignore=c.ignore||"a, img",c.onAdd=b(this,c.onAdd||H),c.onUpdate=b(this,c.onUpdate||H),c.onRemove=b(this,c.onRemove||H),c.onStart=b(this,c.onStart||H),c.onEnd=b(this,c.onEnd||H),a[A]=c.group;for(var d in this)"_"===d.charAt(0)&&(this[d]=b(this,this[d]));void 0!==window.onpointerdown?(w="pointerdown",x="pointerup",y="pointermove",z="pointercancel"):(w="MSPointerDown",x="MSPointerUp",y="MSPointerMove",z="MSPointerCancel"),e(a,"add",c.onAdd),e(a,"update",c.onUpdate),e(a,"remove",c.onRemove),e(a,"start",c.onStart),e(a,"stop",c.onEnd),e(a,"mousedown",this._onTapStart),e(a,"touchstart",this._onTapStart),E&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),e(a,w,this._onTapStart),h(a,"touch-action","none"),h(a,"-ms-touch-action","none"),J.push(this._onDragOver)}function b(a,b){var c=I.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(I.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||C,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 C.defaultView&&C.defaultView.getComputedStyle?c=C.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(){F=!1}function l(a,b){var c=a.lastElementChild.getBoundingClientRect();return b.clientY-(c.top+c.height)>5}var m,n,o,p,q,r,s,t,u,v,w,x,y,z,A="Sortable"+(new Date).getTime(),B=window,C=B.document,D=B.parseInt,E=!!C.createElement("div").dragDrop,F=!1,G=function(a,b){var c=C.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},H=function(){},I=[].slice,J=[];return a.prototype={constructor:a,_applyEffects:function(){g(m,this.options.ghostClass,!0)},_onTapStart:function(a){var b=a.touches&&a.touches[0],f=(b||a).target,g=this.options,h=this.el;if(g.handle&&(f=c(f,g.handle,h)),f=c(f,g.draggable,h),f&&"selectstart"==a.type&&"A"!=f.tagName&&"IMG"!=f.tagName&&f.dragDrop(),f&&!m&&f.parentNode===h){u=a,f.draggable=!0,Array.prototype.forEach.call(g.ignore.split(","),function(a){i(f,a.trim(),j)}),b&&(u={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(u,!0),a.preventDefault()),("pointerdown"==a.type||"MSPointerDown"==a.type)&&(this._onDragStart(u,!0),a.preventDefault()),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(C,"dragover",d);try{C.selection?C.selection.empty():window.getSelection().removeAllRanges()}catch(k){}}},_emulateDragOver:function(){if(v){h(n,"display","none");var a=C.elementFromPoint(v.clientX,v.clientY),b=a,c=this.options.group,d=J.length;if(b)do{if(b[A]===c){for(;d--;)J[d]({clientX:v.clientX,clientY:v.clientY,target:a,rootEl:b});break}a=b}while(b=b.parentNode);h(n,"display","")}},_onTouchMove:function(a){if(u){var b=a.touches[0],c=b.clientX-u.clientX,d=b.clientY-u.clientY;v=b,h(n,"webkitTransform","translate3d("+c+"px,"+d+"px,0)"),h(n,"mozTransform","translate3d("+c+"px,"+d+"px,0)"),h(n,"msTransform","translate3d("+c+"px,"+d+"px,0)"),h(n,"transform","translate3d("+c+"px,"+d+"px,0)"),a.preventDefault()}},_onDragStart:function(a,b){var c=a.target,d=a.dataTransfer;if(o=this.el,m=c,p=c.nextSibling,t=this.options.group,b){var f,g=c.getBoundingClientRect(),i=h(c);n=c.cloneNode(!0),h(n,"top",g.top-D(i.marginTop,10)),h(n,"left",g.left-D(i.marginLeft,10)),h(n,"width",g.width),h(n,"height",g.height),h(n,"opacity","0.8"),h(n,"position","fixed"),h(n,"zIndex","100000"),o.appendChild(n),f=n.getBoundingClientRect(),h(n,"width",2*g.width-f.width),h(n,"height",2*g.height-f.height),e(C,"touchmove",this._onTouchMove),e(C,"touchend",this._onDrop),e(C,"touchcancel",this._onDrop),e(C,y,this._onTouchMove),e(C,x,this._onDrop),e(C,z,this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else d.effectAllowed="move",d.setData("Text",c.textContent),e(C,"drop",this._onDrop);m.dispatchEvent(G("start",m)),setTimeout(this._applyEffects)},_onDragOver:function(a){if(!F&&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]===n||b===a.target&&l(b,a))b.appendChild(m);else if(d&&d!==m&&void 0!==d.parentNode[A]){q!==d&&(q=d,r=h(d),s=d.getBoundingClientRect());var e,f=s,g=f.right-f.left,i=f.bottom-f.top,j=/left|right|inline/.test(r.cssFloat+r.display),o=(j?(a.clientX-f.left)/g:(a.clientY-f.top)/i)>.5,p=d.offsetWidth>m.offsetWidth,u=d.offsetHeight>m.offsetHeight,v=d.nextSibling;F=!0,setTimeout(k,30),e=j?d.previousElementSibling===m&&!p||o>.5&&p:d.nextElementSibling!==m&&!u||o>.5&&u,e&&!v?b.appendChild(m):d.parentNode.insertBefore(m,e?v:d)}}},_onDrop:function(a){clearInterval(this._loopId),f(C,"drop",this._onDrop),f(C,"dragover",d),f(this.el,"dragend",this._onDrop),f(this.el,"dragstart",this._onDragStart),f(this.el,"selectstart",this._onTapStart),f(C,"touchmove",this._onTouchMove),f(C,"touchend",this._onDrop),f(C,"touchcancel",this._onDrop),f(C,y,this._onTouchMove),f(C,x,this._onDrop),f(C,z,this._onDrop),a&&(a.preventDefault(),a.stopPropagation(),n&&n.parentNode.removeChild(n),m&&(j(m),g(m,this.options.ghostClass,!1),o.contains(m)?m.nextSibling!==p&&m.dispatchEvent(G("update",m)):(o.dispatchEvent(G("remove",m)),m.dispatchEvent(G("add",m))),m.dispatchEvent(G("stop",m))),o=m=n=p=u=v=q=r=t=null)},destroy:function(){var a=this.el,b=this.options;f(a,"add",b.onAdd),f(a,"update",b.onUpdate),f(a,"remove",b.onRemove),f(a,"start",b.onStart),f(a,"stop",b.onEnd),f(a,"mousedown",this._onTapStart),f(a,"touchstart",this._onTapStart),f(a,"selectstart",this._onTapStart),f(a,w,this._onTapStart),f(a,"dragover",this._onDragOver),f(a,"dragenter",this._onDragOver),Array.prototype.forEach.call(a.querySelectorAll("[draggable]"),function(a){a.removeAttribute("draggable")}),J.splice(J.indexOf(this._onDragOver),1),this._onDrop(),this.el=null}},a.utils={on:e,off:f,css:h,find:i,bind:b,closest:c,toggleClass:g},a.version="0.3.0",a}); \ No newline at end of file +/*! Sortable 0.4.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||{},c.group=c.group||Math.random(),c.store=c.store||null,c.handle=c.handle||null,c.draggable=c.draggable||a.children[0]&&a.children[0].nodeName||(/[uo]l/i.test(a.nodeName)?"li":"*"),c.ghostClass=c.ghostClass||"sortable-ghost",c.ignore=c.ignore||"a, img",c.onAdd=b(this,c.onAdd||I),c.onUpdate=b(this,c.onUpdate||I),c.onRemove=b(this,c.onRemove||I),c.onStart=b(this,c.onStart||I),c.onEnd=b(this,c.onEnd||I),a[B]=c.group;for(var d in this)"_"===d.charAt(0)&&(this[d]=b(this,this[d]));void 0!==window.onpointerdown?(x="pointerdown",y="pointerup",z="pointermove",A="pointercancel"):(x="MSPointerDown",y="MSPointerUp",z="MSPointerMove",A="MSPointerCancel"),e(a,"add",c.onAdd),e(a,"update",c.onUpdate),e(a,"remove",c.onRemove),e(a,"start",c.onStart),e(a,"stop",c.onEnd),e(a,"mousedown",this._onTapStart),e(a,"touchstart",this._onTapStart),F&&e(a,"selectstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),e(a,x,this._onTapStart),h(a,"touch-action","none"),h(a,"-ms-touch-action","none"),K.push(this._onDragOver),c.store&&this.sort(c.store.get(this))}function b(a,b){var c=J.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(J.call(arguments)))}}function c(a,b,c){if("*"===b)return a;if(a){c=c||D,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 D.defaultView&&D.defaultView.getComputedStyle?c=D.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(){G=!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.innerHTML+a.className+a.src,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,y,z,A,B="Sortable"+(new Date).getTime(),C=window,D=C.document,E=C.parseInt,F=!!D.createElement("div").dragDrop,G=!1,H=function(a,b){var c=D.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},I=function(){},J=[].slice,K=[];return a.prototype={constructor:a,_applyEffects:function(){g(n,this.options.ghostClass,!0)},_onTapStart:function(a){var b=a.touches&&a.touches[0],f=(b||a).target,g=this.options,h=this.el;if(g.handle&&(f=c(f,g.handle,h)),f=c(f,g.draggable,h),f&&"selectstart"==a.type&&"A"!=f.tagName&&"IMG"!=f.tagName&&f.dragDrop(),f&&!n&&f.parentNode===h){v=a,f.draggable=!0,Array.prototype.forEach.call(g.ignore.split(","),function(a){i(f,a.trim(),j)}),b&&(v={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(v,!0),a.preventDefault()),("pointerdown"==a.type||"MSPointerDown"==a.type)&&(this._onDragStart(v,!0),a.preventDefault()),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(D,"dragover",d);try{D.selection?D.selection.empty():window.getSelection().removeAllRanges()}catch(k){}}},_emulateDragOver:function(){if(w){h(o,"display","none");var a=D.elementFromPoint(w.clientX,w.clientY),b=a,c=this.options.group,d=K.length;if(b)do{if(b[B]===c){for(;d--;)K[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;w=b,h(o,"webkitTransform","translate3d("+c+"px,"+d+"px,0)"),h(o,"mozTransform","translate3d("+c+"px,"+d+"px,0)"),h(o,"msTransform","translate3d("+c+"px,"+d+"px,0)"),h(o,"transform","translate3d("+c+"px,"+d+"px,0)"),a.preventDefault()}},_onDragStart:function(a,b){var c=a.target,d=a.dataTransfer;if(p=this.el,n=c,q=c.nextSibling,u=this.options.group,b){var f,g=c.getBoundingClientRect(),i=h(c);o=c.cloneNode(!0),h(o,"top",g.top-E(i.marginTop,10)),h(o,"left",g.left-E(i.marginLeft,10)),h(o,"width",g.width),h(o,"height",g.height),h(o,"opacity","0.8"),h(o,"position","fixed"),h(o,"zIndex","100000"),p.appendChild(o),f=o.getBoundingClientRect(),h(o,"width",2*g.width-f.width),h(o,"height",2*g.height-f.height),e(D,"touchmove",this._onTouchMove),e(D,"touchend",this._onDrop),e(D,"touchcancel",this._onDrop),e(D,z,this._onTouchMove),e(D,y,this._onDrop),e(D,A,this._onDrop),this._loopId=setInterval(this._emulateDragOver,150)}else d.effectAllowed="move",d.setData("Text",c.textContent),e(D,"drop",this._onDrop);n.dispatchEvent(H("start",n)),setTimeout(this._applyEffects)},_onDragOver:function(a){if(!G&&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[B]){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=(j?(a.clientX-f.left)/g:(a.clientY-f.top)/i)>.5,p=d.offsetWidth>n.offsetWidth,q=d.offsetHeight>n.offsetHeight,v=d.nextSibling;G=!0,setTimeout(k,30),e=j?d.previousElementSibling===n&&!p||m>.5&&p:d.nextElementSibling!==n&&!q||m>.5&&q,e&&!v?b.appendChild(n):d.parentNode.insertBefore(n,e?v:d)}}},_onDrop:function(a){clearInterval(this._loopId),f(D,"drop",this._onDrop),f(D,"dragover",d),f(this.el,"dragend",this._onDrop),f(this.el,"dragstart",this._onDragStart),f(this.el,"selectstart",this._onTapStart),f(D,"touchmove",this._onTouchMove),f(D,"touchend",this._onDrop),f(D,"touchcancel",this._onDrop),f(D,z,this._onTouchMove),f(D,y,this._onDrop),f(D,A,this._onDrop),a&&(a.preventDefault(),a.stopPropagation(),o&&o.parentNode.removeChild(o),n&&(j(n),g(n,this.options.ghostClass,!1),p.contains(n)?n.nextSibling!==q&&n.dispatchEvent(H("update",n)):(p.dispatchEvent(H("remove",n)),n.dispatchEvent(H("add",n))),n.dispatchEvent(H("stop",n))),p=n=o=q=v=w=r=s=u=null,this.options.store&&this.options.store.set(this))},toArray:function(){for(var a,b=[],c=this.el.children,d=0,e=c.length;e>d;d++)a=c[d],b.push(a.getAttribute("data-id")||m(a));return b},sort:function(a){var b={},c=this.el;this.toArray().forEach(function(a,d){b[a]=c.children[d]}),a.forEach(function(a){b[a]&&(c.removeChild(b[a]),c.appendChild(b[a]))})},destroy:function(){var a=this.el,b=this.options;f(a,"add",b.onAdd),f(a,"update",b.onUpdate),f(a,"remove",b.onRemove),f(a,"start",b.onStart),f(a,"stop",b.onEnd),f(a,"mousedown",this._onTapStart),f(a,"touchstart",this._onTapStart),f(a,"selectstart",this._onTapStart),f(a,x,this._onTapStart),f(a,"dragover",this._onDragOver),f(a,"dragenter",this._onDragOver),Array.prototype.forEach.call(a.querySelectorAll("[draggable]"),function(a){a.removeAttribute("draggable")}),K.splice(K.indexOf(this._onDragOver),1),this._onDrop(),this.el=null}},a.utils={on:e,off:f,css:h,find:i,bind:b,closest:c,toggleClass:g},a.version="0.4.0",a}); \ No newline at end of file diff --git a/bower.json b/bower.json index 3c1a3a7..3f3d962 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "Sortable", "main": "Sortable.js", - "version": "0.3.0", + "version": "0.4.0", "homepage": "http://rubaxa.github.io/Sortable/", "authors": [ "RubaXa " diff --git a/component.json b/component.json index 55cf651..5539e01 100644 --- a/component.json +++ b/component.json @@ -1,7 +1,7 @@ { "name": "Sortable", "main": "Sortable.js", - "version": "0.1.9", + "version": "0.4.0", "homepage": "http://rubaxa.github.io/Sortable/", "repo": "RubaXa/Sortable", "authors": [ diff --git a/index.html b/index.html index e4507da..df5e702 100644 --- a/index.html +++ b/index.html @@ -309,8 +309,18 @@ sort.destroy(); } - new Sortable(foo, { + window.x = new Sortable(foo, { group: "words", + store: { + get: function (sortable) { + var order = localStorage.getItem(sortable.options.group); + return order ? order.split('|') : []; + }, + set: function (sortable) { + var order = sortable.toArray(); + localStorage.setItem(sortable.options.group, order.join('|')); + } + }, onAdd: function (evt){ console.log('onAdd.foo:', evt.item); }, onUpdate: function (evt){ console.log('onUpdate.foo:', evt.item); }, onRemove: function (evt){ console.log('onRemove.foo:', evt.item); }, @@ -318,6 +328,7 @@ sort.destroy(); onEnd: function(evt){ console.log('onEnd.foo:', evt.item);} }); + new Sortable(bar, { group: "words", onAdd: function (evt){ console.log('onAdd.bar:', evt.item); }, diff --git a/package.json b/package.json index b725f84..ed2c3fb 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sortable", "exportName": "Sortable", - "version": "0.3.0", + "version": "0.4.0", "devDependencies": { "grunt": "*", "grunt-version": "*",