+ dev (v0.4.0)

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: {

README.md

@@ -19,14 +19,19 @@
 ```
 
 ```js
-new Sortable(items);
+var el = document.getElementById('items');
+new Sortable(el);
 ```
 
 
+---
+
+
 ### Options
 ```js
-new Sortable(elem, {
+new Sortable(el, {
 	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",
@@ -53,6 +58,59 @@ 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 the order of elements. Called once during initialization.
+		 * @param   {Sortable}  sortable
+		 * @retruns {Array}
+		 */
+		get: function (sortable) {
+			var order = localStorage.getItem(sortable.options.group);
+			return order ? order.split('|') : [];
+		},
+
+		/**
+		 * Save the order of elements. Called every time at the drag end.
+		 * @param {Sortable}  sortable
+		 */
+		set: function (sortable) {
+			var order = sortable.toArray();
+			localStorage.setItem(sortable.options.group, order.join('|'));
+		}
+	}
+})
+```
+
+
 
 ---
 
@@ -70,6 +128,3 @@ new Sortable(elem, {
 * closest(el`:HTMLElement`, selector`:String`[, ctx`:HTMLElement`])`:HTMLElement|Null` — for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
 * toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — add or remove one classes from each element
 
-
-[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/RubaXa/sortable/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
-

Sortable.js

@@ -58,11 +58,11 @@
 	;
 
 
+
 	/**
 	 * @class  Sortable
 	 * @param  {HTMLElement}  el
-	 * @param  {Object}  [options]
-	 * @constructor
+	 * @param  {Object}       [options]
 	 */
 	function Sortable(el, options){
 		this.el = el; // root element
@@ -71,6 +71,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';
@@ -110,10 +111,13 @@
 		_on(el, 'dragenter', this._onDragOver);
 
 		touchDragOverListeners.push(this._onDragOver);
+
+		// Restore sorting
+		options.store && this.sort(options.store.get(this));
 	}
 
 
-	Sortable.prototype = {
+	Sortable.prototype = /** @lends Sortable.prototype */ {
 		constructor: Sortable,
 
 
@@ -378,6 +382,7 @@
 						// Update event
 						dragEl.dispatchEvent(_createEvent('update', dragEl));
 					}
+
 					dragEl.dispatchEvent(_createEvent('stop', dragEl));
 				}
 
@@ -394,11 +399,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);
@@ -426,6 +478,7 @@
 		}
 	};
 
+
 	function _bind(ctx, fn){
 		var args = slice.call(arguments, 2);
 		return	fn.bind ? fn.bind.apply(fn, [ctx].concat(args)) : function (){
@@ -538,6 +591,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 = {
@@ -551,7 +621,8 @@
 	};
 
 
-	Sortable.version = '0.3.0';
+	Sortable.version = '0.4.0';
+
 
 	// Export
 	return	Sortable;

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 <ibnRubaXa@gmail.com>"

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": [

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); },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sortable",
   "exportName": "Sortable",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "devDependencies": {
     "grunt": "*",
     "grunt-version": "*",