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 CutlerVolunteer Chief Information OfficerAsked:
Who is Participating?
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 CutlerVolunteer Chief Information OfficerAuthor 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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.