Jquery JStree Drag and Drop to sync parent

Posted on 2012-08-30
Last Modified: 2012-09-05
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
Question by:Evan Cutler
    LVL 49

    Accepted Solution

    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.
    LVL 9

    Author Closing Comment

    by:Evan Cutler
    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.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Suggested Solutions

    Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question ( on how to make a page show some balloons animate up a page…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now