标记使用拖放移动的 JS 树节点

Question

我有一个涉及拖放功能的 JS Tree 结构。下面是基本代码。

$('#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>

我需要一种方法来获取那些已被拖放的节点。有没有一种方法可以区分使用拖放移动的节点。 'get_json' 函数以正确的顺序列出了整个节点以及移动的节点，但是除了遍历整个节点列表之外，没有办法区分那些移动的节点

Answer 1

您可以只收听 move_node.jstree 事件并以对您有用的方式存储更改：

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

您可以检查 the docs 了解更多事件或检查 data 的每个元素的含义。

标记使用拖放移动的 JS 树节点

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

javascript

jquery

jstree

jstree-dnd