search

phphe / vue-draggable-nested-tree

Vue2 draggable tree component
https://hetree.phphe.com/
MIT License
344 stars 62 forks source link

How to prevent all child elements? (nested) #37

Closed NeoMarine closed 5 years ago

NeoMarine commented 5 years ago

I would like to be able to use create a list with maxLevel = 1. I noted that your solution in examples, is to use tree helper to set "droppable" to false, but this does not work as desired if maxLevel = 1, because then you cannot move nodes up/down your tree either, as nothing is "droppable"!

Even when I set :droppable="false" and :draggable="true", I still cannot move nodes up/down the tree.

DEMO: https://codepen.io/neomarine/pen/GwKqGW

phphe commented 5 years ago

it is a bug. I will try to fix it this weekend.

NeoMarine commented 5 years ago

Thank you. I have an idea for the fix. Perhaps have all the nodes within one parent node that has "droppable=true" (level 0) and then add starting nodes to that (which will be on level 1), that way you can reposition because node 0 will still be droppable.

So you'll have e.g.

phphe commented 5 years ago

latest 2.1.7 should solve that

NeoMarine commented 5 years ago

Hi phphe, I've found it does work but there is an issue still.

DEMO: https://codepen.io/neomarine/pen/GwKqGW

Try dragging any node up to the top of the list (e.g. move node 2,3 or 4 to node 1's position). It is difficult to do so. You need to drag "to the right" and up at the same time if you want to re-position at the top of the list.

NeoMarine commented 5 years ago

Update: I found my local copy wasn't working and I resolved the issue to being that I was not including the line: cross-tree="cross-tree"

With your latest update, it seems it is now required. If not, you cannot drag/re-position elements.

phphe commented 5 years ago

fixed in 2.1.8

NeoMarine commented 5 years ago

@phphe unfortunately I've discovered a bug in this instance: https://codepen.io/neomarine/pen/gQwMmR

Try dragging node 2 (the only child element) and you will see some weird results. NOTE: You must drag node 2 FIRST don't drag other elements first.

vue-draggable-nested-tree.js:2268 Uncaught TypeError: Cannot read property 'getAttribute' of null at Object.targetPrev

phphe commented 5 years ago

@phphe unfortunately I've discovered a bug in this instance: https://codepen.io/neomarine/pen/gQwMmR

Try dragging node 2 (the only child element) and you will see some weird results. NOTE: You must drag node 2 FIRST don't drag other elements first.

vue-draggable-nested-tree.js:2268 Uncaught TypeError: Cannot read property 'getAttribute' of null at Object.targetPrev

fixed 2.2.0

NeoMarine commented 5 years ago

@phphe I'm unsure if it fixed it as it might be a result of another issue now: https://codepen.io/neomarine/pen/gQwMmR

Cannot make a node become a child node. It won't let you move a node to be a child node any longer. Currently, can only have 1 node level but in this example there SHOULD be 4 maximum.

phphe commented 5 years ago

@NeoMarine The level api is changed, node.level -> node._vm.level . check the latest maxLevel example: https://github.com/phphe/vue-draggable-nested-tree/blob/master/src/examples/MaxLevel.vue

NeoMarine commented 5 years ago

@phphe thank you for letting me know, it was a simple fix after all! So far lists are working wonderfully now. Great component you have here!