jQuery UI Widgets Forums Vue Tree – Drag and Drop only a defined level

Tagged: , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  chrisK 4 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • chrisK

    I’m trying to solve the following topic. I have a tree that has the following structure

    Where the first number is just a counter and the second number is the level of the item in the tree.
    An item should now only be draggable at a defined level of the tree. For example: The item 1-2 should only be draggable at level 1 so the allowed targets can only be the items 1-1, 2-1, 3-1, no other.
    I’ve tried it via doing some action at the dragstart-event. I disabled all items on level 0 and on level 2. They were, it was visible at the tree as the items were greyed out. But it was still possible to drop items on them.
    I then tried to do some action at the drag-event. I checked if the element the dragged element was dropped on, was at the allowed level. If the item was not on the allowed level, the dragged item was put back to the old position. But in that case, the dragged item disappeared.
    So, has anybody on idea how to solve this problem.
    Thanks und regards

    • This topic was modified 4 years, 11 months ago by  chrisK.


    Hello Chris,

    You could use the dragStart and dragEnd callback properties of the jqxTree.
    If you return ‘false’ in dragEnd callback the item would not be dropped and will remain it its current position.
    Please, take a look at the following Example. Here items could only be dragged one level above (to the previous level).

    Best Regards,

    jQWidgets Team


    That work’s and is what I wanted to use in my tree!
    Thanks a lot, Martin!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.