From b3df77a12b1f102be81f7265c63c8b64bceb6cf9 Mon Sep 17 00:00:00 2001 From: Tiberiu Zuld Date: Sat, 21 Apr 2018 22:31:54 +0300 Subject: [PATCH 1/5] add transform to potential conflict attributes Hi @timruffles, Have a use case where the items I want to drag already have transform on they're style, making the transform empty string fixes my issue of having the image outside the view port. --- src/internal/dom-utils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/internal/dom-utils.ts b/src/internal/dom-utils.ts index 51fb07a..1bd5591 100644 --- a/src/internal/dom-utils.ts +++ b/src/internal/dom-utils.ts @@ -53,6 +53,7 @@ function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement ) dstNode.style.pointerEvents = "none"; // Remove any potential conflict attributes + dstNode.style.transform = ""; dstNode.removeAttribute( "id" ); dstNode.removeAttribute( "class" ); dstNode.removeAttribute( "draggable" ); From a3981a4debd3094ad0b46f3fcc0eda82a18a4138 Mon Sep 17 00:00:00 2001 From: Tiberiu Zuld Date: Sun, 22 Apr 2018 15:23:27 +0300 Subject: [PATCH 2/5] move empty transform to createDragImage --- src/internal/dom-utils.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/internal/dom-utils.ts b/src/internal/dom-utils.ts index 1bd5591..3d8c1d1 100644 --- a/src/internal/dom-utils.ts +++ b/src/internal/dom-utils.ts @@ -53,7 +53,6 @@ function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement ) dstNode.style.pointerEvents = "none"; // Remove any potential conflict attributes - dstNode.style.transform = ""; dstNode.removeAttribute( "id" ); dstNode.removeAttribute( "class" ); dstNode.removeAttribute( "draggable" ); @@ -83,7 +82,7 @@ function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement ) export function createDragImage( sourceNode:HTMLElement ):HTMLElement { const dragImage = sourceNode.cloneNode( true ); - + dragImage.style.transform = ""; // this removes any id's and stuff that could interfere with drag and drop prepareNodeCopyAsDragImage( sourceNode, dragImage ); From 5266e81ecebca6dfaca6da7b43cfc3393210d3ad Mon Sep 17 00:00:00 2001 From: Tiberiu Zuld Date: Sun, 22 Apr 2018 15:43:24 +0300 Subject: [PATCH 3/5] remove transform only for first node --- src/internal/dom-utils.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/internal/dom-utils.ts b/src/internal/dom-utils.ts index 3d8c1d1..8a28add 100644 --- a/src/internal/dom-utils.ts +++ b/src/internal/dom-utils.ts @@ -34,7 +34,7 @@ export function onEvt(el:EventTarget, event:string, handler:EventListener, captu }; } -function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement ) { +function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement, firstNode:boolean) { // Is this node an element? if( srcNode.nodeType === 1 ) { @@ -45,6 +45,11 @@ function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement ) const csName = cs[ i ]; dstNode.style.setProperty( csName, cs.getPropertyValue( csName ), cs.getPropertyPriority( csName ) ); } + + // remove potential conflict if first node has transform + if( firstNode ) { + dstNode.style.transform = ""; + } // no interaction with the drag image, pls! this is also important to make the drag image transparent for hit-testing // hit testing is done in the drag and drop iteration to find the element the user currently is hovering over while dragging. @@ -74,7 +79,7 @@ function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement ) for( let i = 0; i < srcNode.childNodes.length; i++ ) { - prepareNodeCopyAsDragImage( srcNode.childNodes[ i ], dstNode.childNodes[ i ] ); + prepareNodeCopyAsDragImage( srcNode.childNodes[ i ], dstNode.childNodes[ i ], false ); } } } @@ -82,9 +87,8 @@ function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement ) export function createDragImage( sourceNode:HTMLElement ):HTMLElement { const dragImage = sourceNode.cloneNode( true ); - dragImage.style.transform = ""; // this removes any id's and stuff that could interfere with drag and drop - prepareNodeCopyAsDragImage( sourceNode, dragImage ); + prepareNodeCopyAsDragImage( sourceNode, dragImage, true ); return dragImage; } From c2570504446e9b73ac803866a4af0a2b2d8ecc8a Mon Sep 17 00:00:00 2001 From: Tiberiu Zuld Date: Sun, 22 Apr 2018 15:44:14 +0300 Subject: [PATCH 4/5] Update dom-utils.ts --- src/internal/dom-utils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/internal/dom-utils.ts b/src/internal/dom-utils.ts index 8a28add..1421873 100644 --- a/src/internal/dom-utils.ts +++ b/src/internal/dom-utils.ts @@ -87,6 +87,7 @@ function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement, f export function createDragImage( sourceNode:HTMLElement ):HTMLElement { const dragImage = sourceNode.cloneNode( true ); + // this removes any id's and stuff that could interfere with drag and drop prepareNodeCopyAsDragImage( sourceNode, dragImage, true ); From f5cbdefa86521a0287cd9ee95a2dcf522935d268 Mon Sep 17 00:00:00 2001 From: Tiberiu Zuld Date: Sun, 22 Apr 2018 15:46:20 +0300 Subject: [PATCH 5/5] Update dom-utils.ts --- src/internal/dom-utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/internal/dom-utils.ts b/src/internal/dom-utils.ts index 1421873..11983e4 100644 --- a/src/internal/dom-utils.ts +++ b/src/internal/dom-utils.ts @@ -34,7 +34,7 @@ export function onEvt(el:EventTarget, event:string, handler:EventListener, captu }; } -function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement, firstNode:boolean) { +function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement, firstNode:boolean ) { // Is this node an element? if( srcNode.nodeType === 1 ) {