Question

我想使用JsTree（或者更确切地说，那是我现在正在尝试的那个），拥有2棵树。您应该能够在树之间拖放节点，但不能在树中拖放节点。并且节点不应该移动或被复制，它应该创建一个关系，即我假设这将通过回调实现，因为树不必注册关系本身，我只需要获取信息，例如子节点A上已删除子节点A.

这是我到目前为止仅仅是JsTree网站上的样本，基本上只有两棵树，这还不够好，因为你现在无法在树之间拖动，而且你也可以在里面拖动，你应该再次不允许在我的场景中（html只是我把它放在Bootstrap示例页面中）：

<div class="row">
        <div class="col-md-4">
            <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
                euismod. Donec sed odio dui. </p>

            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>


            <div id="jstree">
                <!-- in this example the tree is populated from inline HTML -->
                <ul>
                    <li>Root node start
                        <ul>
                            <li id="child_node_1">Child node 1</li>
                            <li>Child node 2</li>
                        </ul>
                    </li>
                    <li>Root node 2</li>
                </ul>
            </div>

        </div>
        <div class="col-md-4">
            <h2>Heading</h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
                euismod. Donec sed odio dui. </p>

            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>

            <div id="jstree2">
                <!-- in this example the tree is populated from inline HTML -->
                <ul>
                    <li>Root node start
                        <ul>
                            <li id="child_node_1_2">Child node A</li>
                            <li>Child node B</li>
                        </ul>
                    </li>
                    <li>Root node 2</li>
                </ul>
            </div>
        </div>
        <div class="col-md-4">
            <h2>Heading</h2>

            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
                porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
                fermentum massa justo sit amet risus.</p>

            <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
    </div>

和jquery（再次主要来自样本）：

jQuery(document).ready(function () {

    $('#jstree').jstree({
        "core":{
            "animation":0,
            "check_callback":true,
            "themes":{ "stripes":true }
        },
        rules:{
            droppable:[ "tree-drop" ],
            multiple:true,
            deletable:"all",
            draggable:"all"
        },
        "types":{
            "#":{
                "max_children":1,
                "max_depth":4,
                "valid_children":["root"]
            },
            "root":{
                "icon":"/static/3.0.0-beta5/assets/images/tree_icon.png",
                "valid_children":["default"]
            },
            "default":{
                "valid_children":["default", "file"]
            },
            "file":{
                "icon":"glyphicon glyphicon-file",
                "valid_children":[]
            }
        },
        "plugins":[
            "contextmenu", "dnd", "search",
            "state", "types", "wholerow"
        ]
    });

    $('#jstree2').jstree({
            "core":{
                "animation":0,
                "check_callback":true,
                "themes":{ "stripes":true }
            },
            rules:{
                droppable:[ "tree-drop" ],
                multiple:true,
                deletable:"all",
                draggable:"all"
            },
            "types":{
                "#":{
                    "max_children":1,
                    "max_depth":4,
                    "valid_children":["root"]
                },
                "root":{
                    "icon":"/static/3.0.0-beta5/assets/images/tree_icon.png",
                    "valid_children":["default"]
                },
                "default":{
                    "valid_children":["default", "file"]
                },
                "file":{
                    "icon":"glyphicon glyphicon-file",
                    "valid_children":[]
                }
            },
            "plugins":[
                "contextmenu", "dnd", "search",
                "state", "types", "wholerow"
            ]
        });

    // bind to events triggered on the tree
    $('#jstree').on("changed.jstree", function (e, data) {
        console.log(data.selected);
    });

});

Answer 1

首先 - 从github获取最新的源代码。您必须使用check_callback选项并将其设置为如下所述的函数：http://www.jstree.com/api/#/?q=check_callback&f= $ .jstree.defaults.core.check_callback

在回调中确保您只允许多树移动（检查您在回调中收到的参数并将它们传递给$.jstree.reference(obj / par)._id。您需要确保父节点和节点来自不同的树。只有返回true。

确保您不允许任何delete_node操作，并在接收树上侦听copy_node.jstree事件 - 一旦触发 - 删除新复制的节点并创建您的关系。

另一种解决方法是使用jstree.dnd.js作为基础构建自己的插件。这可能会更好，但需要更多时间。

JsTree拖动两棵树和链接？

1 个答案: