To mark the JS Tree nodes that are moved using drag and drop

Question

I have a JS Tree structure which involves drag and drop functionality. Below is the basic code.

$('#using_html_1').jstree({
"core": {
            "check_callback":true
         },
"plugins" : ["dnd"]
});

$( "#btnTest" ).click(function() {
  var v =$("#using_html_1").jstree(true).get_json('#', { 'flat': true });
  alert(v);
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>

<div class="row">

    <div class="col-md-4">
        <div class="demo" id="using_html_1">
            <ul>
                <li>
                    Fruits Group 1
                    <ul>
                        <li>Apple</li>
                        <li>Bannana</li>
                        <li>Grapes</li>
                        <li>Oranges</li>
                    </ul>
                </li>
                <li>
                    Fruits Group 2
                    <ul>
                        <li>Blue Berry</li>
                        <li>Strawberry</li>
                        <li>Water Melon</li>
                        <li>Musk melon</li>
                    </ul>

                </li>
            </ul>
        </div>
    </div>
</div>

<btn class="btn btn-primary" id="btnTest">Submit</btn>

I need a way to get those nodes which have been dragged and dropped. Is there a way I can differentiate the nodes that have moved using drag and drop. The 'get_json' function lists the entire nodes along with the moved ones in the right order but there is no way to distinguish those nodes which have moved other than looping through the entire list of nodes

Answer 1

You could just listen to the move_node.jstree event and store the changes in a way that is useful for you:

$('#using_html_1').on("move_node.jstree", function (e, data) {
    console.log(data);
});

You can check the docs for more events or to check what each element of data means.