从 html 表格行拖放到 jQuery treeview答案

【问题标题】：Drag and drop from html table row to jQuery treeview从 html 表格行拖放到 jQuery treeview
【发布时间】：2013-05-25 12:17:20
【问题描述】：

我需要创建一个支持从表格行拖放到树视图的视图，有点像在 Windows 资源管理器中将文件拖到文件夹中。

有人可以重新启动一个免费的基于 jQuery 的树视图，它会支持这一点以及如何完成它。我以前没有做过 jQuery 拖放，所以我不确定要注意什么。我看到很多支持拖放的小部件，但我不确定它是否扩展到其他页面元素。

我的树视图可以在服务器端加载，因为节点是静态的。我在服务器端使用 MVC4。

【问题讨论】：

我一直在阅读 jquery 拖放文档，在 jQuery 插件之类的基本树小部件上实现这一点似乎相当简单：Treeview，只要我可以设置放置目标树的类节点。

标签： jquery drag-and-drop treeview

【解决方案1】：

我的 MVC 项目具有相同的功能。尝试使用 kendoUI。它们具有带有拖放功能的树视图控件。

【讨论】：

谢谢裘德。我已经看过了，但由于我的树视图是静态的，我希望我能免费找到一些东西。
您可以使用它的演示版。您将拥有对其控件的完全访问权限。

【解决方案2】：

我最终使用了 jstree。它可以满足我的一切需求，甚至更多。文档很难理解，但我有很多用户。

基本上，要使 tr（或任何外来元素）可拖动到树节点，您所做的一切就是在元素上设置 class="jstree-draggable" 。然后像这样初始化树视图。

$("#projectTree").jstree({

    "plugins": ["themes", "html_data", "ui", "hotkeys", "dnd", "crrm"],
    "animation": 100,
    "ui": {
        "select_limit": 1
    },
    // this is the only way I could find to prevent nodes from being dragged.
    "crrm": {
        "move": {
            "check_move": function (m) {
                return false;
            }
        }
    },
    "dnd": {
        "drag_check": function (data) {
            // foreign object
            var cell = $(data.o);
            var row = cell.closest("tr");
            // get the list of valid folders this row can be moved to
            var canMoveTo = row.data("canmoveto");

            // get the folder type 
            var moveToStatus = $(data.r).data("applicationstatus");

            if (canMoveTo.indexOf(moveToStatus) == -1)
                return { after: false, before: false, inside: false };
            else
                return { after: false, before: false, inside: true };
        },
        "drag_finish": function (data) {
            // from foreign object
            var cell = $(data.o);
            var row = cell.closest("tr");

            // to the hovered node
            var moveToStatus = $(data.r).data("applicationstatus");

            moveRowToStatusFolderConfirm(row, moveToStatus);

            //alert("drag_finish");
            return true;
        }
    }
});

【讨论】：