From 2deb92d88411b31d9ed1beb1cc56316dbbcaf4c3 Mon Sep 17 00:00:00 2001 From: Sathish Kumar D Date: Sat, 14 May 2016 20:20:05 -0400 Subject: [PATCH 1/2] Dragging ghost image is not close to the mouse pointer --- example-clone-ghost-image.html | 144 +++++++++++++++++++++++++++++++++ ghost.jpeg | Bin 0 -> 6256 bytes ngDraggable.js | 18 ++++- 3 files changed, 158 insertions(+), 4 deletions(-) create mode 100644 example-clone-ghost-image.html create mode 100644 ghost.jpeg 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 0000000000000000000000000000000000000000..3d810697d2fac53f83005d6af01ed0115fdffcec GIT binary patch literal 6256 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 literal 0 HcmV?d00001 diff --git a/ngDraggable.js b/ngDraggable.js index 3f4a2ee..6d38c03 100644 --- a/ngDraggable.js +++ b/ngDraggable.js @@ -395,6 +395,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 +437,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) { From 60fcabbd8d508a521419cee8ad731b1b52da7df6 Mon Sep 17 00:00:00 2001 From: Sathish Kumar D Date: Sat, 14 May 2016 21:06:31 -0400 Subject: [PATCH 2/2] Click and Double click not working in draggable element #247 --- example-click-dbclick.html | 157 +++++++++++++++++++++++++++++++++++++ ngDraggable.js | 50 ++++++------ 2 files changed, 183 insertions(+), 24 deletions(-) create mode 100644 example-click-dbclick.html 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}} +
+ +
footer
+ + + + + + diff --git a/ngDraggable.js b/ngDraggable.js index 6d38c03..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() {