diff --git a/example-click-dbclick.html b/example-click-dbclick.html new file mode 100644 index 0000000..dcc9dca --- /dev/null +++ b/example-click-dbclick.html @@ -0,0 +1,157 @@ + + + + ngDraggable + + + + + +
+ +
+

ngDraggable Click dbclick Example

+
+ + +
+ {{obj.name}} +
+
+
+ {{obj.name}} +
+
+
+
+ Drop area #1 + +
+ {{obj.name}} +
+ +
+
+
+ + +
+ {{clonedData.name}} +
+ + + + + + + + diff --git a/example-clone-ghost-image.html b/example-clone-ghost-image.html new file mode 100644 index 0000000..4af6660 --- /dev/null +++ b/example-clone-ghost-image.html @@ -0,0 +1,144 @@ + + + + ngDraggable + + + + + +
+ +
+

ngDraggable Clone Ghost Image Example

+
+ + +
+ {{obj.name}} +
+
+ +
+
+ Drop area #1 + +
+ {{obj.name}} +
+ +
+
+
+ + +
+ +
+ + + + + + + + diff --git a/ghost.jpeg b/ghost.jpeg new file mode 100644 index 0000000..3d81069 Binary files /dev/null and b/ghost.jpeg differ diff --git a/ngDraggable.js b/ngDraggable.js index 3f4a2ee..bc0b4a2 100644 --- a/ngDraggable.js +++ b/ngDraggable.js @@ -19,7 +19,7 @@ angular.module("ngDraggable", []) }; }]) - .directive('ngDrag', ['$rootScope', '$parse', '$document', '$window', 'ngDraggable', function ($rootScope, $parse, $document, $window, ngDraggable) { + .directive('ngDrag', ['$rootScope', '$parse', '$document', '$window', '$timeout', 'ngDraggable', function ($rootScope, $parse, $document, $window, $timeout, ngDraggable) { return { restrict: 'A', link: function (scope, element, attrs) { @@ -107,29 +107,31 @@ angular.module("ngDraggable", []) * On touch devices as a small delay so as not to prevent native window scrolling */ var onpress = function(evt) { - if(! _dragEnabled)return; - - if (isClickableElement(evt)) { - return; - } - - if (evt.type == "mousedown" && evt.button != 0) { - // Do not start dragging on right-click - return; - } - - if(_hasTouch){ - cancelPress(); - _pressTimer = setTimeout(function(){ - cancelPress(); - onlongpress(evt); - },100); - $document.on(_moveEvents, cancelPress); - $document.on(_releaseEvents, cancelPress); - }else{ - onlongpress(evt); - } - + $timeout(function () { + + if(! _dragEnabled)return; + + if (isClickableElement(evt)) { + return; + } + + if (evt.type == "mousedown" && evt.button != 0) { + // Do not start dragging on right-click + return; + } + + if(_hasTouch){ + cancelPress(); + _pressTimer = setTimeout(function(){ + cancelPress(); + onlongpress(evt); + },100); + $document.on(_moveEvents, cancelPress); + $document.on(_releaseEvents, cancelPress); + }else{ + onlongpress(evt); + } + }); }; var cancelPress = function() { @@ -395,6 +397,8 @@ angular.module("ngDraggable", []) link: function (scope, element, attrs) { var img, _allowClone=true; var _dragOffset = null; + var _closeToMouse = attrs.ngDragCloneCloseToMouse; + var _positionPadding = !isNaN(attrs.ngDragClonePositionPadding) ? attrs.ngDragClonePositionPadding : 0; scope.clonedData = {}; var initialize = function () { @@ -435,17 +439,25 @@ angular.module("ngDraggable", []) element.css('width', obj.element[0].offsetWidth); element.css('height', obj.element[0].offsetHeight); - moveElement(obj.tx, obj.ty); + if (_closeToMouse) { + moveElement(obj.event.pageX-_positionPadding, obj.event.pageY-_positionPadding); + } else { + moveElement(obj.tx, obj.ty); + } } }; var onDragMove = function(evt, obj) { if(_allowClone) { - _tx = obj.tx + obj.dragOffset.left; - _ty = obj.ty + obj.dragOffset.top; + var _tx = obj.tx + obj.dragOffset.left; + var _ty = obj.ty + obj.dragOffset.top; - moveElement(_tx, _ty); + if (_closeToMouse) { + moveElement(obj.event.pageX-_positionPadding, obj.event.pageY-_positionPadding); + } else { + moveElement(_tx, _ty); + } } }; var onDragEnd = function(evt, obj) {