javascript jstree中dnd插件中的拖放事件没有被调用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6105905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:28:56  来源:igfitidea点击:

Drag and Drop events in dnd plugin in jstree are not getting called

javascriptjstree

提问by ashishjmeshram

We are using jsTree for tree representation of the Files and folders. Files and folders can be moved in and out from other folders.

我们使用 jsTree 来表示文件和文件夹的树形结构。文件和文件夹可以移入和移出其他文件夹。

For this I have enabled the drag and drop plugin. The folders and files can be dragged and dropped but the events which are called on drag and drop are not getting called.

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

I need these events to fire on drag and drop as I need to update the status of the drag and drop in the backend using Ajax.

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

Please help

请帮忙

Below is the code.

下面是代码。

<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"
                    }
                }

            }
        }



    });
});

Am I missing anything or is there anything else I need to do in order for the drag and drop events to get called?

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

采纳答案by bjornd

If you want to drag nodes inside of the tree you should use CRRM plugin, not DND. DND is used to drag nodes outside the tree or between the trees.

如果您想在树内拖动节点,您应该使用CRRM 插件,而不是 DND。DND 用于将节点拖到树外或树之间。

回答by Naga Harish M

Check with this URL Issue with JSTree drag dropUse class="jstree-drop"along with IDs for all the nodes. It will work. For example:- If you use json data

使用 JSTree 拖放检查此 URL问题使用class="jstree-drop"以及所有节点的 ID。它会起作用。例如:- 如果您使用 json 数据

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

if we use html data then add class="jstree-drop"to all nodes. Then "drop_finish" event will works fine, but not drag_check,drag_finish. I tried by adding jstree-drag in css class.

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

Updated (after one hour on 19th-July-2011):- add jstree-draggablecss class to all elements drag events also works fine more information http://www.jstree.com/documentation/dnd

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

回答by verybadbug

Options dnd.drag_check, dnd.drag_finish, dnd.drop_finishis uses for foreign objects. For manage moving inside one tree (or between trees) use crrm.move.check_move.

选项dnd.drag_checkdnd.drag_finishdnd.drop_finish是用途异物。要管理在一棵树内(或树之间)移动,请使用crrm.move.check_move.