Drop Event Handling for External Element Drag onto Current Node about he-tree HOT 11 OPEN

doc: https://hetree.phphe.com/v2/guide#drop-from-outside

code example:

from he-tree.

I have read the documentation, I don't need to add a new node, I just need to catch the drop event. According to the documentation, you can return false in @external-drag-over to prevent creating a new node, but then the drop event is not triggered.

The case is as follows: there is a tree of folders in one column and files in another, I need to drag a file onto a folder so that the folder contains this file, but there is no need to add it to the tree of folders.

from he-tree.

First , return true in onExternalDragOver. Then use externalDataHandler as onDrop, and return nothing in it.

from he-tree.

In the current solution there is a placeholder. All of this seems like half measures.

from he-tree.

try listen native ondragover, ondrop in your node element and call event.stopPropagation

from he-tree.

Please check demo. I use stopPropagation. It is precisely because I have not been able to do it the way the HTML Drag and Drop API describes it that I created this issue.

from he-tree.

function onDragOver(e) {
  e.preventDefault();
  e.stopPropagation()
  console.log('dragover');
}

function onDrop(e) {
  e.preventDefault();
  e.stopPropagation()
  console.log('drop');
}

from he-tree.

I should add, I used stopPropagation, but it breaks the behavior when dragging tree nodes. According to the HTML Drag and Drop API, for an element to be a valid target, you only need to call preventDefault on it.

from he-tree.

https://stackblitz.com/edit/vitejs-vite-h5dofl?file=src%2FApp.vue

Edit

from he-tree.

add a variable, if drag start in tree, set it true, if drag in external, set it false. then call stopPropagation when it is false.

from he-tree.

This looks more like a hack than a solution.

from he-tree.