angular-ui-tree/angular-ui-tree

Disable placeholder and cancel drop when dropping item outside tree

Opened this issue · 4 comments

Deleted user commented

Note: for support questions, please use our Gitter channel. This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?
I would like to report a bug.

What is the current behavior?
The current behavior is described in issue #464, which got fixed back in 2015 by pull request #550. This fix was then undone again by pull requests #739 and #856 (in an attempt to fix issue #622). While issue #622 might have been solved, this re-introduced the issue described in #464.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.
The issue can be witnessed on the demo page here: http://angular-ui-tree.github.io/angular-ui-tree/#/connected-trees. Drag one of the items from the left tree over to the right, but don't drop it (placeholder appears). Now move the dragged item to somewhere else (not over the right tree); placeholder is still shown. Now drop the item (still not hovering over the right tree); item is added to the right tree anyway.

The same works the other way around, when moving from the right to the left tree. Basically, a placeholder is always shown in the last tree that was hovered with a dragged item, and the item is always added to this same tree, even when dropped somewhere else entirely.

What is the expected behavior?
When dragging an item from tree one to tree two, I expect the tree being dragged to (and hovered over - the second tree) to show some kind of placeholder where the item is going to be dropped. When dragging the item outside of the second tree, I would expect this placeholder to disappear again. More importantly, however, I would expect the item to not still be added to the second tree when dropped anywhere but on the tree itself.

What is the motivation / use case for changing the behavior?
We use UI Tree in our application and this was reported as an issue.

Which versions of Angular, UI Tree and which browser / OS are affected by this issue? Did this work in previous versions of Angular, UI Tree? Please also test with the latest version.
We're using the latest version of UI Tree (which is 2.22.5 at the time of writing). Browser: Chrome (most recent version), OS: Windows. I expect other browsers and OSes to be affected as well, seeing as the out-of-bounds check is not in the code anymore.

Other information (e.g. stacktraces, related issues, suggestions how to fix)
N/A.

Deleted user commented

Any updates on this?

enpfeff commented

bump

enpfeff commented

Here's a workaround using the beforeDrop callback

function beforeDrop(e) {
            const targetElm = angular.element(window.document.elementFromPoint(e.pos.lastX, e.pos.lastY));
            const outOfBounds = !(targetElm.scope().$type);
            if(outOfBounds) return Promise.reject();
            return Promise.resolve();
        }
  • 👍3