diff --git a/drag-arrange.js b/drag-arrange.js index 030b542..e825a07 100644 --- a/drag-arrange.js +++ b/drag-arrange.js @@ -28,24 +28,21 @@ /** * Javascript events for touch device/desktop - * @return {Object} + * A Touch-screen device will also likely be compatible with mouse events, + * so on Touch enabled devices we should also listen for mouse-related events. + * However we register Touch-related events only on touch-enabled screens. + * @type {Object} */ - var dragEvents = (function () { - if (IS_TOUCH_DEVICE) { - return { - START: 'touchstart', - MOVE: 'touchmove', - END: 'touchend' - }; - } - else { - return { - START: 'mousedown', - MOVE: 'mousemove', - END: 'mouseup' - }; - } - }()); + var dragEventsMouse = { + START: 'mousedown', + MOVE: 'mousemove', + END: 'mouseup' + }; + var dragEventsTouch = { + START: 'touchstart', + MOVE: 'touchmove', + END: 'touchend' + }; $.fn.arrangeable = function(options) { var dragging = false; @@ -84,9 +81,11 @@ var $this = $(this); if (dragSelector) { - $this.on(dragEvents.START + eventNamespace, dragSelector, dragStartHandler); + $this.on(dragEventsMouse.START + eventNamespace, dragSelector, dragStartHandler); + if (IS_TOUCH_DEVICE) $this.on(dragEventsTouch.START + eventNamespace, dragSelector, dragStartHandler); } else { - $this.on(dragEvents.START + eventNamespace, dragStartHandler); + $this.on(dragEventsMouse.START + eventNamespace, dragStartHandler); + if (IS_TOUCH_DEVICE) $this.on(dragEventsTouch .START + eventNamespace, dragStartHandler); } function dragStartHandler(e) { @@ -102,8 +101,12 @@ // bind mouse-move/touchmove on document // (as it is not compulsory that event will trigger on dragging element) - $(document).on(dragEvents.MOVE + eventNamespace, dragMoveHandler) - .on(dragEvents.END + eventNamespace, dragEndHandler); + $(document).on(dragEventsMouse.MOVE + eventNamespace, dragMoveHandler) + .on(dragEventsMouse.END + eventNamespace, dragEndHandler); + if (IS_TOUCH_DEVICE) { + $(document).on(dragEventsTouch.MOVE + eventNamespace, dragMoveHandler) + .on(dragEventsTouch.END + eventNamespace, dragEndHandler); + } function dragMoveHandler(e) { if (!touchDown) { return; } @@ -171,14 +174,20 @@ var $this = $(this); if (dragSelector) { - $this.off(dragEvents.START + eventNamespace, dragSelector); + $this.off(dragEventsMouse.START + eventNamespace, dragSelector); + if (IS_TOUCH_DEVICE) $this.off(dragEventsTouch.START + eventNamespace, dragSelector); } else { - $this.off(dragEvents.START + eventNamespace); + $this.off(dragEventsMouse.START + eventNamespace); + if (IS_TOUCH_DEVICE) $this.off(dragEventsTouch.START + eventNamespace); } }); - $(document).off(dragEvents.MOVE + eventNamespace) - .off(dragEvents.END + eventNamespace); + $(document).off(dragEventsMouse.MOVE + eventNamespace) + .off(dragEventsMouse.END + eventNamespace); + if (IS_TOUCH_DEVICE) { + $(document).off(dragEventsTouch.MOVE + eventNamespace) + .off(dragEventsTouch.END + eventNamespace); + } // remove data $elements.eq(0).data('drag-arrange-destroy', null); diff --git a/drag-arrange.min.js b/drag-arrange.min.js index cf72005..d297182 100644 --- a/drag-arrange.min.js +++ b/drag-arrange.min.js @@ -1,2 +1,2 @@ -"use strict";!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){function f(a){var b=a.clone();return b.css({position:"absolute",width:a.width(),height:a.height(),"z-index":1e5}),b}function g(a,b,c){for(var k,l,m,n,o,p,q,d=a.offset(),e=a.width(),f=a.height(),g=d.left,h=d.left+e,i=d.top,j=d.top+f,r=0;rg,p=mi,q=o&&p))return k[0]}function h(b,c,d){var e=g(b,c,d);if(e!==c[0]){var f=d.index(e),h=d.index(c);fc||Math.abs(q)>c)&&(g=f(e),o=i.offsetLeft-parseInt(e.css("margin-left"))-parseInt(e.css("padding-left")),p=i.offsetTop-parseInt(e.css("margin-top"))-parseInt(e.css("padding-top")),g.css({left:o,top:p}),e.parent().append(g),e.css("visibility","hidden"),d=!0)}}function t(b){d&&(b.stopPropagation(),d=!1,g.remove(),i.style.visibility="visible",a(i).parent().trigger(r,[a(i)])),n=!1}function u(){m.each(function(){var c=b.dragSelector,d=a(this);c?d.off(e.START+q,c):d.off(e.START+q)}),a(document).off(e.MOVE+q).off(e.END+q),m.eq(0).data("drag-arrange-destroy",null),m=null,s=null,t=null}var g,i,k,l,m,o,p,q,d=!1,n=!1;if("string"==typeof b&&"destroy"===b)return this.eq(0).data("drag-arrange-destroy")&&this.eq(0).data("drag-arrange-destroy")(),this;b=a.extend({dragEndEvent:"drag.end.arrangeable"},b);var r=b.dragEndEvent;m=this,q=j(),this.each(function(){function g(a){a.stopPropagation(),n=!0,k=a.clientX||a.originalEvent.touches[0].clientX,l=a.clientY||a.originalEvent.touches[0].clientY,i=d}var c=b.dragSelector,d=this,f=a(this);c?f.on(e.START+q,c,g):f.on(e.START+q,g)}),a(document).on(e.MOVE+q,s).on(e.END+q,t),this.eq(0).data("drag-arrange-destroy",u)}}); +"use strict";!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){function g(a){var b=a.clone();return b.css({position:"absolute",width:a.width(),height:a.height(),"z-index":1e5}),b}function h(a,b,c){for(var k,l,m,n,o,p,q,d=a.offset(),e=a.width(),f=a.height(),g=d.left,h=d.left+e,i=d.top,j=d.top+f,r=0;rg,p=mi,q=o&&p))return k[0]}function i(b,c,d){var e=h(b,c,d);if(e!==c[0]){var f=d.index(e),g=d.index(c);fc||Math.abs(f)>c)&&(j=g(d),q=l.offsetLeft-parseInt(d.css("margin-left"))-parseInt(d.css("padding-left")),r=l.offsetTop-parseInt(d.css("margin-top"))-parseInt(d.css("padding-top")),j.css({left:q,top:r}),d.parent().append(j),d.css("visibility","hidden"),h=!0)}}function v(b){h&&(b.stopPropagation(),h=!1,j.remove(),l.style.visibility="visible",a(l).parent().trigger(t,[a(l)])),p=!1}function w(){o.each(function(){var c=d.dragSelector,g=a(this);c?(g.off(e.START+s,c),b&&g.off(f.START+s,c)):(g.off(e.START+s),b&&g.off(f.START+s))}),a(document).off(e.MOVE+s).off(e.END+s),b&&a(document).off(f.MOVE+s).off(f.END+s),o.eq(0).data("drag-arrange-destroy",null),o=null,u=null,v=null}var j,l,m,n,o,q,r,s,h=!1,p=!1;if("string"==typeof d&&"destroy"===d)return this.eq(0).data("drag-arrange-destroy")&&this.eq(0).data("drag-arrange-destroy")(),this;d=a.extend({dragEndEvent:"drag.end.arrangeable"},d);var t=d.dragEndEvent;o=this,s=k(),this.each(function(){function i(a){a.stopPropagation(),p=!0,m=a.clientX||a.originalEvent.touches[0].clientX,n=a.clientY||a.originalEvent.touches[0].clientY,l=g}var c=d.dragSelector,g=this,h=a(this);c?(h.on(e.START+s,c,i),b&&h.on(f.START+s,c,i)):(h.on(e.START+s,i),b&&h.on(f.START+s,i))}),a(document).on(e.MOVE+s,u).on(e.END+s,v),b&&a(document).on(f.MOVE+s,u).on(f.END+s,v),this.eq(0).data("drag-arrange-destroy",w)}}); //# sourceMappingURL=drag-arrange.min.js.map