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

发布于 2024-11-09 22:11:01 字数 2178 浏览 5 评论 0原文

我们使用 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"
                    }
                }

            }
        }



    });
});

我是否遗漏了任何内容，或者还需要做什么才能调用拖放事件？

原文

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

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.

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

假情假意假温柔 2024-11-16 22:11:01

检查此 URL JSTree 拖放问题
使用 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

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

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

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

回复收藏 0 原文