jstree中dnd插件中的拖放事件未被调用

时间:2011-05-24 05:07:23

标签: javascript jstree

我们使用jsTree来表示文件和文件夹。文件和文件夹可以从其他文件夹移入和移出。

为此,我启用了拖放插件。可以拖放文件夹和文件,但不会调用拖放时调用的事件。

我需要在拖放时触发这些事件,因为我需要使用Ajax更新后端拖放的状态。

请帮忙

以下是代码。

<script type="text/javascript" class="source">

$(function() {

        $("#folderTree").jstree( {
        "dnd" : {
            "drop_finish" : function () { 
                alert("DROP"); 
            },
            "drag_check" : function (data) {
                if(data.r.attr("id") == "phtml_1") {
                    return false;
                }
                return { 
                    after : false, 
                    before : false, 
                    inside : true 
                };

                alert("hhh jjj kk ");
            },
            "drag_finish" : function () { 
                alert("DRAG OK"); 
            }
        },

        "plugins" : [ "core", "html_data", "themes", "ui","dnd"],

        "ui" : {
            "initially_select" : [ "phtml_1" ]
        },

        "core" : { "initially_open" : [ "phtml_1" ] },

        "themes" : {
                "theme" : "apple"
        },

        "types" : {
            "valid_children" : [ "root" ],
            "types" : {
                "root" : {
                    "icon" : { 
                        "image" : "../images/drive.png" 
                    },
                    "valid_children" : [ "folder" ],
                    "draggable" : false
                },
                "default" : {
                    "deletable" : false,
                    "renameable" : false
                },

                "folder" : {
                    "valid_children" : [ "file" ],
                    "max_children" : 3
                },
                "file" : {
                    // the following three rules basically do the same
                    "valid_children" : "none",
                    "max_children" : 0,
                    "max_depth" : 0,
                    "icon" : {
                        "image" : "../images/file.png"
                    }
                }

            }
        }



    });
});

我是否遗漏了任何东西,或者还有什么需要做的,以便调用拖放事件?

3 个答案:

答案 0 :(得分:6)

检查此网址Issue with JSTree drag drop 使用 class =“jstree-drop”以及所有节点的ID。它会工作。 例如:- 如果你使用json数据

"plugins" : [ "core", "json_data", "themes", "ui","dnd"],
{
    {id : "id1",rel : "folder",class:"jstree-drop"},
    data:"New folder2",
    state:"closed"
}

如果我们使用html数据,则将 class =“jstree-drop”添加到所有节点。 然后“drop_finish”事件将正常工作,但不是drag_check,drag_finish。我尝试在css类中添加jstree-drag。

更新(2011年7月19日一小时后): - 将 jstree-draggable css类添加到所有元素拖动事件也工作正常 更多信息http://www.jstree.com/documentation/dnd

答案 1 :(得分:2)

如果要拖动树内的节点,则应使用CRRM plugin,而不是DND。 DND用于拖动树外或树之间的节点。

答案 2 :(得分:1)

选项dnd.drag_checkdnd.drag_finishdnd.drop_finish用于外来对象。要管理在一棵树内(或在树之间)移动,请使用crrm.move.check_move