- CustomEvents; * evt.detail -> evt.item

README.md

@@ -32,15 +32,15 @@ new Sortable(elem, {
 	ghostClass: "sortable-ghost",
 
 	onAdd: function (evt){
-		var itemEl = ui.detail;
+		var itemEl = evt.item;
 	},
 
 	onUpdate: function (evt){
-		var itemEl = ui.detail; // the current dragged HTMLElement
+		var itemEl = evt.item; // the current dragged HTMLElement
 	},
 
 	onRemove: function (evt){
-		var itemEl = ui.detail;
+		var itemEl = evt.item;
 	}
 });
 ```

Sortable.js

@@ -38,17 +38,12 @@
 		, parseInt = win.parseInt
 		, _silent = false
 
-		, Event = (function (){
-			function CustomEvent(event, params){
-				var evt = document.createEvent('CustomEvent');
-				evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-				return	evt;
-			}
-
-			CustomEvent.prototype = win.CustomEvent.prototype;
-
-			return CustomEvent;
-		})()
+		, _createEvent = function (event/**String*/, item/**HTMLElement*/){
+			var evt = document.createEvent('Event');
+			evt.initEvent(event, true, true);
+			evt.item = item;
+			return evt;
+		}
 
 		, noop = function (){}
 		, slice = [].slice
@@ -132,6 +127,7 @@
 				tapEvt = evt;
 				target.draggable = true;
 
+
 				// Disable "draggable"
 				_find(target, 'a', _disableDraggable);
 				_find(target, 'img', _disableDraggable);
@@ -262,11 +258,11 @@
 					, target = _closest(evt.target, this.options.draggable, el)
 				;
 
-				if( target[expando] === void 0 ){
+				if( target && target[expando] === void 0 ){
 					if( el.children.length === 0 ){
 						el.appendChild(dragEl);
 					}
-					else if( target && (target !== dragEl) ){
+					else if( target !== dragEl ){
 						if( lastEl !== target ){
 							lastEl = target;
 							lastCSS = _css(target)
@@ -327,20 +323,18 @@
 				}
 
 				if( dragEl ){
-					var opts = { bubbles: true, cancelable: true, detail: dragEl };
-
 					_toggleClass(dragEl, this.options.ghostClass, false);
 
 					if( !rootEl.contains(dragEl) ){
 						// Remove event
-						rootEl.dispatchEvent(new Event('remove', opts));
+						rootEl.dispatchEvent(_createEvent('remove', dragEl));
 
 						// Add event
-						dragEl.dispatchEvent(new Event('add', opts));
+						dragEl.dispatchEvent(_createEvent('add', dragEl));
 					}
 					else if( dragEl.nextSibling !== nextEl ){
 						// Update event
-						dragEl.dispatchEvent(new Event('update', opts));
+						dragEl.dispatchEvent(_createEvent('update', dragEl));
 					}
 				}
 
@@ -500,7 +494,7 @@
 	};
 
 
-	Sortable.version = '0.1.3';
+	Sortable.version = '0.1.4';
 
 	// Export
 	return	Sortable;

Sortable.min.js

-/*! Sortable 0.1.3 - MIT | git://github.com/rubaxa/Sortable.git */
-!function(a){"use strict";"function"==typeof define&&define.amd?define("Sortable",[],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||"li",c.ghostClass=c.ghostClass||"sortable-ghost",c.onAdd=b(this,c.onAdd||A),c.onUpdate=b(this,c.onUpdate||A),c.onRemove=b(this,c.onRemove||A),a[u]=c.group;for(var d in this)"_"===d.charAt(0)&&(this[d]=b(this,this[d]));e(a,"add",c.onAdd),e(a,"update",c.onUpdate),e(a,"remove",c.onRemove),e(a,"mousedown",this._onTapStart),e(a,"touchstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),C.push(this._onDragOver)}function b(a,b){var c=B.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(B.call(arguments)))}}function c(a,b,c){if(a){c=c||w,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 w.defaultView&&w.defaultView.getComputedStyle?c=w.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(){y=!1}var l,m,n,o,p,q,r,s,t,u="Sortable"+(new Date).getTime(),v=window,w=v.document,x=v.parseInt,y=!1,z=function(){function a(a,b){var c=w.createEvent("CustomEvent");return c.initCustomEvent(a,b.bubbles,b.cancelable,b.detail),c}return a.prototype=v.CustomEvent.prototype,a}(),A=function(){},B=[].slice,C=[];return a.prototype={constructor:a,_applyEffects:function(){g(l,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&&!l&&f!==h){s=a,f.draggable=!0,i(f,"a",j),i(f,"img",j),b&&(s={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(s,!0),a.preventDefault()),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(w,"dragover",d);try{w.selection?w.selection.empty():window.getSelection().removeAllRanges()}catch(k){}}},_emulateDragOver:function(){if(t){h(m,"display","none");var a=w.elementFromPoint(t.clientX,t.clientY),b=a,c=this.options.group,d=C.length;do if(b[u]===c){for(;d--;)C[d]({clientX:t.clientX,clientY:t.clientY,target:a,rootEl:b});break}while(b=b.parentNode);h(m,"display","")}},_onTouchMove:function(a){if(s){var b=a.touches[0],c=b.clientX-s.clientX,d=b.clientY-s.clientY;t=b,h(m,"webkitTransform","translate3d("+c+"px,"+d+"px,0)")}},_onDragStart:function(a,b){var c=a.target,d=a.dataTransfer;if(n=this.el,l=c,o=c.nextSibling,r=this.options.group,b){var f=c.getBoundingClientRect(),g=h(c);m=c.cloneNode(!0),h(m,"top",f.top-x(g.marginTop,10)),h(m,"left",f.left-x(g.marginLeft,10)),h(m,"width",f.right-f.left),h(m,"height",f.bottom-f.top),h(m,"opacity","0.8"),h(m,"position","fixed"),h(m,"zIndex","100000"),c.parentNode.insertBefore(m,c),e(w,"touchmove",this._onTouchMove),e(w,"touchend",this._onDrop),this._loopId=setInterval(this._emulateDragOver,200)}else d.effectAllowed="move",d.setData("Text",c.textContent),e(w,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!y&&r===this.options.group&&(void 0===a.rootEl||a.rootEl===this.el)){var b=this.el,d=c(a.target,this.options.draggable,b);if(void 0===d[u])if(0===b.children.length)b.appendChild(l);else if(d&&d!==l){p!==d&&(p=d,q=h(d));var e,f=d.getBoundingClientRect(),g=f.right-f.left,i=f.bottom-f.top,j=/left|right|inline/.test(q.cssFloat+q.display),m=(j?(a.clientX-f.left)/g:(a.clientY-f.top)/i)>.5,n=d.offsetHeight>l.offsetHeight,o=d.offsetWidth>l.offsetWidth,s=d.nextSibling;y=!0,setTimeout(k,30),e=j?d.previousElementSibling===l&&!o||m>.5&&o:d.nextElementSibling!==l&&!n||m>.5&&n,e&&!s?b.appendChild(l):d.parentNode.insertBefore(l,e?s:d)}}},_onDrop:function(a){if(clearInterval(this._loopId),f(w,"drop",this._onDrop),f(w,"dragover",d),f(this.el,"dragend",this._onDrop),f(this.el,"dragstart",this._onDragStart),f(w,"touchmove",this._onTouchMove),f(w,"touchend",this._onDrop),a){if(a.preventDefault(),m&&m.parentNode.removeChild(m),l){var b={bubbles:!0,cancelable:!0,detail:l};g(l,this.options.ghostClass,!1),n.contains(l)?l.nextSibling!==o&&l.dispatchEvent(new z("update",b)):(n.dispatchEvent(new z("remove",b)),l.dispatchEvent(new z("add",b)))}n=l=m=o=s=t=p=q=r=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,"mousedown",this._onTapStart),f(a,"touchstart",this._onTapStart),f(a,"dragover",this._onDragOver),f(a,"dragenter",this._onDragOver),C.splice(C.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.1.3",a});
\ No newline at end of file
+/*! Sortable 0.1.4 - MIT | git://github.com/rubaxa/Sortable.git */
+!function(a){"use strict";"function"==typeof define&&define.amd?define("Sortable",[],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||"li",c.ghostClass=c.ghostClass||"sortable-ghost",c.onAdd=b(this,c.onAdd||A),c.onUpdate=b(this,c.onUpdate||A),c.onRemove=b(this,c.onRemove||A),a[u]=c.group;for(var d in this)"_"===d.charAt(0)&&(this[d]=b(this,this[d]));e(a,"add",c.onAdd),e(a,"update",c.onUpdate),e(a,"remove",c.onRemove),e(a,"mousedown",this._onTapStart),e(a,"touchstart",this._onTapStart),e(a,"dragover",this._onDragOver),e(a,"dragenter",this._onDragOver),C.push(this._onDragOver)}function b(a,b){var c=B.call(arguments,2);return b.bind?b.bind.apply(b,[a].concat(c)):function(){return b.apply(a,c.concat(B.call(arguments)))}}function c(a,b,c){if(a){c=c||w,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 w.defaultView&&w.defaultView.getComputedStyle?c=w.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(){y=!1}var l,m,n,o,p,q,r,s,t,u="Sortable"+(new Date).getTime(),v=window,w=v.document,x=v.parseInt,y=!1,z=function(a,b){var c=w.createEvent("Event");return c.initEvent(a,!0,!0),c.item=b,c},A=function(){},B=[].slice,C=[];return a.prototype={constructor:a,_applyEffects:function(){g(l,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&&!l&&f!==h){s=a,f.draggable=!0,i(f,"a",j),i(f,"img",j),b&&(s={target:f,clientX:b.clientX,clientY:b.clientY},this._onDragStart(s,!0),a.preventDefault()),e(this.el,"dragstart",this._onDragStart),e(this.el,"dragend",this._onDrop),e(w,"dragover",d);try{w.selection?w.selection.empty():window.getSelection().removeAllRanges()}catch(k){}}},_emulateDragOver:function(){if(t){h(m,"display","none");var a=w.elementFromPoint(t.clientX,t.clientY),b=a,c=this.options.group,d=C.length;do if(b[u]===c){for(;d--;)C[d]({clientX:t.clientX,clientY:t.clientY,target:a,rootEl:b});break}while(b=b.parentNode);h(m,"display","")}},_onTouchMove:function(a){if(s){var b=a.touches[0],c=b.clientX-s.clientX,d=b.clientY-s.clientY;t=b,h(m,"webkitTransform","translate3d("+c+"px,"+d+"px,0)")}},_onDragStart:function(a,b){var c=a.target,d=a.dataTransfer;if(n=this.el,l=c,o=c.nextSibling,r=this.options.group,b){var f=c.getBoundingClientRect(),g=h(c);m=c.cloneNode(!0),h(m,"top",f.top-x(g.marginTop,10)),h(m,"left",f.left-x(g.marginLeft,10)),h(m,"width",f.right-f.left),h(m,"height",f.bottom-f.top),h(m,"opacity","0.8"),h(m,"position","fixed"),h(m,"zIndex","100000"),c.parentNode.insertBefore(m,c),e(w,"touchmove",this._onTouchMove),e(w,"touchend",this._onDrop),this._loopId=setInterval(this._emulateDragOver,200)}else d.effectAllowed="move",d.setData("Text",c.textContent),e(w,"drop",this._onDrop);setTimeout(this._applyEffects)},_onDragOver:function(a){if(!y&&r===this.options.group&&(void 0===a.rootEl||a.rootEl===this.el)){var b=this.el,d=c(a.target,this.options.draggable,b);if(d&&void 0===d[u])if(0===b.children.length)b.appendChild(l);else if(d!==l){p!==d&&(p=d,q=h(d));var e,f=d.getBoundingClientRect(),g=f.right-f.left,i=f.bottom-f.top,j=/left|right|inline/.test(q.cssFloat+q.display),m=(j?(a.clientX-f.left)/g:(a.clientY-f.top)/i)>.5,n=d.offsetHeight>l.offsetHeight,o=d.offsetWidth>l.offsetWidth,s=d.nextSibling;y=!0,setTimeout(k,30),e=j?d.previousElementSibling===l&&!o||m>.5&&o:d.nextElementSibling!==l&&!n||m>.5&&n,e&&!s?b.appendChild(l):d.parentNode.insertBefore(l,e?s:d)}}},_onDrop:function(a){clearInterval(this._loopId),f(w,"drop",this._onDrop),f(w,"dragover",d),f(this.el,"dragend",this._onDrop),f(this.el,"dragstart",this._onDragStart),f(w,"touchmove",this._onTouchMove),f(w,"touchend",this._onDrop),a&&(a.preventDefault(),m&&m.parentNode.removeChild(m),l&&(g(l,this.options.ghostClass,!1),n.contains(l)?l.nextSibling!==o&&l.dispatchEvent(z("update",l)):(n.dispatchEvent(z("remove",l)),l.dispatchEvent(z("add",l)))),n=l=m=o=s=t=p=q=r=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,"mousedown",this._onTapStart),f(a,"touchstart",this._onTapStart),f(a,"dragover",this._onDragOver),f(a,"dragenter",this._onDragOver),C.splice(C.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.1.4",a});
\ No newline at end of file

index.html

@@ -311,16 +311,16 @@ sort.destroy();
 
 			new Sortable(foo, {
 				group: "words",
-				onAdd: function (evt){ console.log('onAdd.foo:', evt.detail); },
-				onUpdate: function (evt){ console.log('onUpdate.foo:', evt.detail); },
-				onRemove: function (evt){ console.log('onRemove.foo:', evt.detail); }
+				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); }
 			});
 
 			new Sortable(bar, {
 				group: "words",
-				onAdd: function (evt){ console.log('onAdd.bar:', evt.detail); },
-				onUpdate: function (evt){ console.log('onUpdate.bar:', evt.detail); },
-				onRemove: function (evt){ console.log('onRemove.bar:', evt.detail); }
+				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); }
 			});
 
 
@@ -366,7 +366,7 @@ sort.destroy();
 	<!-- Parallax -->
 	<script>
 		(function (){
-			var x, y;
+			var x, y, reqAnimFrame = window.requestAnimationFrame || function (fn){ setTimeout(fn, 1000/60); };
 
 			var items = [].slice.call(document.querySelectorAll('.layer')).map(function (el){
 				var rect = el.getBoundingClientRect();
@@ -410,7 +410,7 @@ sort.destroy();
 					});
 				}
 
-				requestAnimationFrame(_loop);
+				reqAnimFrame(_loop);
 			})();
 		})();
 	</script>

package.json

 {
 	"name": "sortable",
 	"exportName": "Sortable",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"devDependencies": {
 		"grunt": "*",
 		"grunt-version": "*",
@@ -16,7 +16,7 @@
 		"type": "git",
 		"url": "git://github.com/rubaxa/Sortable.git"
 	},
-	"keywords": ["sortable", "reorder"],
+	"keywords": ["sortable", "reorder", "drag"],
 	"author": "Konstantin Lebedev <ibnRubaXa@gmail.com>",
 	"license": "MIT"
 }