From 667082ffa8c78e3afe5d9e12befaea9a956ee303 Mon Sep 17 00:00:00 2001 From: Justin Gregory Date: Thu, 25 Feb 2016 23:29:40 -0600 Subject: [PATCH 1/5] Position drag element relative to mousedown on original draggable element (Issue 34) This only applies to the automatically generated clone element, not custom template elements. Original issue can be found here: https://github.com/One-com/knockout-dragdrop/issues/34 --- lib/knockout.dragdrop.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/lib/knockout.dragdrop.js b/lib/knockout.dragdrop.js index 919c8be..c6ac4aa 100644 --- 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'); From a202ddd3bd9cab13964901c556f940cee2a953a8 Mon Sep 17 00:00:00 2001 From: Kenneth Gjersdal Date: Fri, 18 Nov 2016 08:41:32 +0100 Subject: [PATCH 2/5] CSS-class to identify zones that are possible to drop on on drag start. --- lib/knockout.dragdrop.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/lib/knockout.dragdrop.js b/lib/knockout.dragdrop.js index 74e10dd..40db504 100644 --- a/lib/knockout.dragdrop.js +++ b/lib/knockout.dragdrop.js @@ -93,6 +93,7 @@ this.dragEnter = args.dragEnter; this.dragOver = args.dragOver; this.dragLeave = args.dragLeave; + this.possibleOnDrag = args.possibleOnDrag; this.active = false; this.inside = false; this.dirty = false; @@ -173,8 +174,13 @@ } DropZone.prototype = Zone.prototype; + DropZone.prototype.removePossibleDrag = function() { + toggleClass(this.element, 'drag-possible', false); + } + DropZone.prototype.updateStyling = function () { if (this.dirty) { + toggleClass(this.element, 'drag-possible', this.possibleOnDrag); toggleClass(this.element, 'drag-over', this.active); toggleClass(this.element, 'drop-rejected', this.inside && !this.active); } @@ -270,6 +276,7 @@ forEach(dropZones[name], function (zone) { zone.updateStyling(); + zone.removePossibleDrag(); }); if (winningDropZone && winningDropZone.drop) { @@ -394,6 +401,7 @@ element: element, data: data, drop: options.drop, + possibleOnDrag: options.possibleOnDrag, dragEnter: options.dragEnter, dragOver: options.dragOver, dragLeave: options.dragLeave From 3f7867ed79f4471b09af0f42f6ee8a3432ac9534 Mon Sep 17 00:00:00 2001 From: Gareth Blain Date: Fri, 26 May 2017 12:43:56 +0100 Subject: [PATCH 3/5] Fixed draggable clone incorrect size Currently if you start dragging a draggable element it adds the copy to the end of the parent which CAN change the size of the original object. Then we got the sizes of the original for the clone and it was wrong before making the clone actually popup (so it doesn't take space in the DOM). Could have been fixed by making it a popup (absolute position etc) before we got the sizes or simpler moved the appendChild command after we grab the sizes of the object. I can't see this causing any other issues. --- lib/knockout.dragdrop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/knockout.dragdrop.js b/lib/knockout.dragdrop.js index 74e10dd..fa3e000 100644 --- a/lib/knockout.dragdrop.js +++ b/lib/knockout.dragdrop.js @@ -476,12 +476,12 @@ function createCloneProxyElement() { var dragProxy = element.cloneNode(true); - element.parentNode.appendChild(dragProxy); var style = window.getComputedStyle(element, null); dragProxy.style.height = style.getPropertyValue('height'); dragProxy.style.width = style.getPropertyValue('width'); dragProxy.style.opacity = 70 / 100; dragProxy.style.filter = 'alpha(opacity=70)'; + element.parentNode.appendChild(dragProxy); return dragProxy; } From 9318a02dde0c05269b0b746e682a89e84d1d6577 Mon Sep 17 00:00:00 2001 From: Gareth Blain Date: Tue, 13 Jun 2017 09:56:05 +0100 Subject: [PATCH 4/5] Moved popup model onto body and copied CSS over it so it doesn't effect any tables it might be in Adding a new into a table makes most browsers add space for them even when they are floating with fixed positions... --- lib/knockout.dragdrop.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/knockout.dragdrop.js b/lib/knockout.dragdrop.js index 8c06f1d..f0763d9 100644 --- a/lib/knockout.dragdrop.js +++ b/lib/knockout.dragdrop.js @@ -490,7 +490,8 @@ dragProxy.style.width = style.getPropertyValue('width'); dragProxy.style.opacity = 70 / 100; dragProxy.style.filter = 'alpha(opacity=70)'; - element.parentNode.appendChild(dragProxy); + document.body.appendChild(dragProxy); + dragProxy.style.cssText = document.defaultView.getComputedStyle(element, "").cssText; return dragProxy; } From 30b1a443f81b91c6950ab4cd4ec204ba84a30b5f Mon Sep 17 00:00:00 2001 From: Gareth Blain Date: Wed, 14 Jun 2017 09:07:59 +0100 Subject: [PATCH 5/5] =?UTF-8?q?Revert=20"Position=20drag=20element=20relat?= =?UTF-8?q?ive=20to=20mousedown=20on=20original=20draggable=20ele=E2=80=A6?= =?UTF-8?q?"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/knockout.dragdrop.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/lib/knockout.dragdrop.js b/lib/knockout.dragdrop.js index f0763d9..cf094bd 100644 --- a/lib/knockout.dragdrop.js +++ b/lib/knockout.dragdrop.js @@ -187,20 +187,19 @@ this.dirty = false; }; - function DragElement(element, eventOffset) { + function DragElement(element) { 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 - 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'; + 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'; }; DragElement.prototype.remove = function () { @@ -548,13 +547,7 @@ var dragElement = null; if (typeof options.element === 'undefined') { - 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); + dragElement = new DragElement(createCloneProxyElement()); } var overlay = document.createElement('div');