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 Tree节点

1 个答案: