search

vakata / jstree

jquery tree plugin
http://jstree.com
MIT License
5.15k stars 1.38k forks source link

DND - Moves overly restricted, not allowing intermediate level nodes #2524

Closed MrBenGriffin closed 3 years ago

MrBenGriffin commented 3 years ago

The screen capture below shows an attempt to move node 'R27' to be the last child of - nodes R8, R9, R13, R4, R16, R11, R21, and R24 respectively.

Current interaction is limited to current tier (R8) and deepest tier (R3). Since each tier level is has a contextual depth, there is no reason why dragging the node into each depth zone should not allow placing the node as the last sibling of that tier.

All of the aforementioned nodes should be available.

While I am aware that the workaround (using defaults.dnd.inside_pos=last – I also believe that 'last' should be the default), it is not UX intuitive to think of dropping a node onto the parent in order to place it correctly.

https://user-images.githubusercontent.com/1785064/116526359-6de09c80-a8d1-11eb-8455-5feeb412398f.mov

vakata commented 3 years ago

While dragging hover over R8, R9, R13, R4, R16, R11, R21 or R24 and release when the indicator is below the respective node.

MrBenGriffin commented 3 years ago

Thanks for your response - but I don't see it. I can drag a node into (make child of) R8, etc.. but I don't see what you suggest. See below - attempting to move R7 into being the last child of R12. I can easily move it to be the first, or second child of R12, but to make it the last child, I have to either close R22 or I have to drag it onto R12 (with the default option set), neither of which are intuitive to a normal user.

https://user-images.githubusercontent.com/1785064/116536391-bfdaef80-a8dc-11eb-9110-79ef9aac7b1a.mov

MrBenGriffin commented 3 years ago

Okay I found it.
I did not realise that you divide each node area into a slim top (before) / main body (under) / slim bottom (after).

I have to say that it's pretty hard to find the 'after' drop area, as it is only over the link (not over the navigation area).

https://user-images.githubusercontent.com/1785064/116540209-c1f37d00-a8e1-11eb-9299-3c416984e19f.mov