[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1423
  • Last Modified:

Jquery JStree Drag and Drop to sync parent

I have two jstrees, and I want to perform a DND between them.

The first jstree is a 2 level tree. Parent and Leafs. simple. This tree does not get altered in any way, no drop/change operations allowed.

The second jstree needs to be empty.

Here's the operation I need to do:

    If a child is brought across, it must go into the same parent it just left. If a parent doesn't exist? create it.

    If a parent is brought across, then the parent and all of it's children are brought across.

That's it. While I'm trying to find this across google, I was hoping someone has worked this issue before and knows how to accomplish this.

Thanks Much
Evan Cutler
Evan Cutler
1 Solution
Julian HansenCommented:
Are you using a <ul> to store the items? Are you / can you use a class to distinguish between parent and child nodes?

Take option 2 first - this is pretty simple. You detach the <li> that is dragged (detached) from the source tree. That will bring the children across as well.

Option 2 - when you drop you check if the class is child or parent.
If parent - then simply append to the destination <ul>
If child then get the source parent id.
Check if that id is in the destination tree (to avoid duplicate id's you could prefix id with 'source_' and 'target_').
If it exist, append to the existing element
Otherwise create the new element and append the element

If no other posts come in and you have problem implementing the above post back here and I will give it a shot - but post some source so I can see how you have implemented your trees.

It is an interesting question - just don't have time to code it today.
Evan CutlerAuthor Commented:
I've been asked to change gears...but I'm going to pursue this on my own.  I think your path is a good way to start researching.  This might lead to controlled data migration between trees.  A nice prospect.


Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now