Drag and Drop Event Listeners ?? is there any

[AbdullahMateen]

• Version: "@grapoza/vue-tree": "^3.1.2",
• Is there any drag and drop event listeners? Consider i have a three layer tree view. There are few things that i want to achieve with it.

  ├── Layer 1 (root)              # true
  ├── Layer 2 (head)          # true
      ├── Layer 3 (child)     # true
      ├── Layer 3 (child)     # true
  ├── Layer 2 (head)          # true
      ├── Layer 3 (child)     # true
      ├── Layer 2 (head)      # false => 2nd layer cannot be child of 2nd layer
  ├── Layer 2 (head)          # true
  ├── Layer 2 (head)          # true
      ├── Layer 3 (child)     # true
          ├── Layer 3 (child) # false => 3rd layer cannot be child of 3rd layer
      ├── Layer 3 (child)     # true
  ├── Layer 3 (child)         # true => 3rd layer can be on 2nd layer

  • I want to restrict 2nd layer to be droped as child of 2nd layer.
  • I want to restrict 3nd layer to be droped as child of 3nd layer.
  • I want to know when nodes are moved (order changed/parent change) so i can update database

[grapoza]

Hi @AbdullahMateen, I've taken a look through and I'm not seeing a good way to achieve what you're looking for. The built-in drag and drop is pretty sparse (I built it for a specific use case I had once) and I need to give it an update at some point. As you noticed, to support your requests it would need a way to hook into the drag and drop events and also emit an event detailing the move, assuming you can't watch the original data.

Outside of adding enhancements that won't help you immediately, you would have limited options I think. One that I know has been done by others is to implement your own drag-and-drop handlers instead of using the drag-and-drop provided by the component. The main difficulty with that is making sure you can map the dragged element to your data model somehow. Another option would be to fork the repo and just add your code in the mixins. Since the 3.x line is mostly in maintenance mode at this point, it's a low risk for missing newer changes to the tree component.

[AbdullahMateen]

ok thanks for your response. i look for workaround as u mentioned.

[AbdullahMateen]

Hi @grapoza related to these points

I want to restrict 2nd layer to be droped as child of 2nd layer.
I want to restrict 3nd layer to be droped as child of 3nd layer.

i have achievied this using these settings though it is not a proper solution but it fit my scenario

├── Layer 1 (root) { treeNodeSpec: { draggable: false, allowDrop: false }, }
    ├── Layer 2 (head) { treeNodeSpec: { draggable: false, allowDrop: true }, }
        ├── Layer 3 (child) { treeNodeSpec: { draggable: true, allowDrop: false }, }

hope this might help someone else who has similar scenario

[AbdullahMateen]

it might be helpfull if we could have properties like

allowDrop: true allowDropBefore: true, allowDropAfter: true, allowDropChild: true,

or

allowDrop: ['before', 'after', 'child', 'all'],