Position drag element relative to mousedown on original draggable ele…

…ment (Issue 34) This only applies to the automatically generated clone element, not custom template elements. Original issue can be found here: One-com#34
jmgregory · Feb 26, 2016 · 667082f · 667082f
1 parent 0e6195f
commit 667082f
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/lib/knockout.dragdrop.js b/lib/knockout.dragdrop.js
@@ -178,19 +178,20 @@
         this.dirty = false;
     };
 
-    function DragElement(element) {
+    function DragElement(element, eventOffset) {
         this.element = element;
         toggleClass(this.element, 'drag-element', true);
         this.element.style.position = 'fixed';
         this.element.style.zIndex = 9998;
         this.element.addEventListener('selectstart', function () { return false; }, true);
+        this.eventOffset = eventOffset || { top: 0, left: 0 };
     }
 
     DragElement.prototype.updatePosition = function (event) {
-        this.element.style.top = (event.pageY - window.pageYOffset) + 'px';
-        this.element.style.left = (event.pageX - window.pageXOffset) + 'px';
-        this.element.style.top = (getEventCoord(event, 'pageY') - window.pageYOffset) + 'px';
-        this.element.style.left = (getEventCoord(event, 'pageX') - window.pageXOffset) + 'px';
+        this.element.style.top = (event.pageY - window.pageYOffset - this.eventOffset.top) + 'px';
+        this.element.style.left = (event.pageX - window.pageXOffset - this.eventOffset.left) + 'px';
+        this.element.style.top = (getEventCoord(event, 'pageY') - window.pageYOffset - this.eventOffset.top) + 'px';
+        this.element.style.left = (getEventCoord(event, 'pageX') - window.pageXOffset - this.eventOffset.left) + 'px';
     };
 
     DragElement.prototype.remove = function () {
@@ -535,7 +536,13 @@
 
                         var dragElement = null;
                         if (typeof options.element === 'undefined') {
-                            dragElement = new DragElement(createCloneProxyElement());
+                            var bodyRect = document.body.getBoundingClientRect();
+                            var elemRect = element.getBoundingClientRect();
+                            var eventOffset = {
+                                top: startEvent.pageY - elemRect.top + bodyRect.top,
+                                left: startEvent.pageX - elemRect.left + bodyRect.left,
+                            };
+                            dragElement = new DragElement(createCloneProxyElement(), eventOffset);
                         }
 
                         var overlay = document.createElement('div');