+ 'animation' option and 'create' method

README.md

@@ -2,11 +2,13 @@
 
 
 ## Features
-* Support touch devices and [modern](http://caniuse.com/#search=drag) browsers
+ * Support touch devices and [modern](http://caniuse.com/#search=drag) browsers
-* Built using native HTML5 drag and drop API
+ * Animation moving items when sorting (css animation)
-* Simple API
+ * Built using native HTML5 drag and drop API
-* Lightweight, 2KB gzipped
+ * Simple API
-* No jQuery
+ * 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: {
 		/**

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
+					var   dragRect = dragEl.getBoundingClientRect()
-						  rect = lastRect
+						, targetRect = target.getBoundingClientRect()
-						, width = rect.right - rect.left
+						, width = targetRect.right - targetRect.left
-						, height = rect.bottom - rect.top
+						, 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;

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

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

package.json

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