Skip to content

add transform to potential conflict attributes #130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

add transform to potential conflict attributes #130

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b3df77a
add transform to potential conflict attributes
tiberiuzuld Apr 21, 2018
a3981a4
move empty transform to createDragImage
tiberiuzuld Apr 22, 2018
5266e81
remove transform only for first node
tiberiuzuld Apr 22, 2018
c257050
Update dom-utils.ts
tiberiuzuld Apr 22, 2018
f5cbdef
Update dom-utils.ts
tiberiuzuld Apr 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/internal/dom-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand All @@ -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.
Expand Down Expand Up @@ -74,7 +79,7 @@ function prepareNodeCopyAsDragImage( srcNode:HTMLElement, dstNode:HTMLElement )

for( let i = 0; i < srcNode.childNodes.length; i++ ) {

prepareNodeCopyAsDragImage( <HTMLElement>srcNode.childNodes[ i ], <HTMLElement>dstNode.childNodes[ i ] );
prepareNodeCopyAsDragImage( <HTMLElement>srcNode.childNodes[ i ], <HTMLElement>dstNode.childNodes[ i ], false );
}
}
}
Expand All @@ -84,7 +89,7 @@ export function createDragImage( sourceNode:HTMLElement ):HTMLElement {
const dragImage = <HTMLElement>sourceNode.cloneNode( true );

// this removes any id's and stuff that could interfere with drag and drop
prepareNodeCopyAsDragImage( sourceNode, dragImage );
prepareNodeCopyAsDragImage( sourceNode, dragImage, true );

return dragImage;
}
Expand Down