JSTree 限制拖放深度答案

【问题标题】：JSTree Limit Drag and Drop DepthJSTree 限制拖放深度
【发布时间】：2013-04-02 22:44:13
【问题描述】：

我正在使用 Django 构建一个网页。我正在尝试使用 jsTree 来允许用户将样本分配到不同的位置。根节点是位置，叶节点是样本。示例从标记为“未知”的位置开始，我希望用户能够添加新位置，然后将示例拖到正确的位置。

UNKNOWN
    Sample 1
    Sample 2
    Sample 3
Location 1
Location 2

到目前为止，我还没有在树中添加任何位置，所以只有 UNKNOWN

这是我在 Django 模板中通过 html 创建树的地方：

<div id="demo1" class="demo" style="height:500px;width:500px">
<ul>
    {% for key, value in samples.items %}
    <li id="{{key}}">
        <a href="#">{{key}}</a>
        <ul>
            {% for key2, value2 in value.items %}
            <li id="{{key2}}">
                <a href="#">{{key2}}: {{value2}}</a>
            </li>
            {% endfor %}
        </ul>
    </li>
    {% endfor %}
</ul>
</div>

这会变成以下 html（取自 firebug）：

<div id="demo1" class="demo" style="height:500px;width:500px">
    <ul>
        <li id="UNKNOWN">
            <a href="#">UNKNOWN</a>
            <ul>
                <li id="3511904">
                    <a href="#">3511904: ECKD 06-10-061-22W5M</a>
                </li>

                <li id="3511905">
                    <a href="#">3511905: WCKD 06-10-061-22W5M</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

到目前为止，我在 Javascript 中的所有内容都是这样的：

<script type="text/javascript">
$(function () {
    $("#demo1").jstree({
        "plugins" : ["themes","html_data","ui","crrm","hotkeys","dnd"],
        "core" : { "initially_open" : [ {% for key, value in samples.items %}"{{key}}", {% endfor %} ] },
    })
});
</script>

我对整个 Web 开发非常陌生，并且没有使用 Javascript 的经验。现在我要做的就是设置拖放，以便只能移动示例节点，并且只能将它们设置为位置节点的子节点。我似乎遇到的主要障碍是我无法弄清楚如何检查节点是否有父节点。

【问题讨论】：

标签： javascript django jstree

【解决方案1】：

今天换个思路再试一次，终于明白了：

<script type="text/javascript">
$(function () {
    $("#demo1").jstree({
        "plugins" : ["themes","html_data","ui","crrm","hotkeys","dnd"],
        "core" : { "initially_open" : [ {% for key, value in samples.items %}"{{key}}", {% endfor %} ] },
        "crrm" : {
            "move" : {
                "check_move" : function(data) {
                    var p = this._get_parent(data.o);
                    //You cannot move a node with no parents
                    if(p == -1) {
                        return false;
                    }
                    //You cannot move a child to the root
                    else if(!this.get_path(data.np[0])) {
                        return false;
                    }
                    //You cannot move a node deeper than 1 level into the tree
                    else if(this.get_path(data.np[0]).length > 1) {
                        return false;
                    }

                    return true;
                }
            }
        },
        "dnd" : {
            //I don't know what this does... I was more or less just copying code
            "drop_target" : false,
            "drag_target" : false
        },
    })
});
</script>

【讨论】：