jquery - 从 html 表格行拖放到 jQuery treeview

Question

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

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

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

Answer 1

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

Answer 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;
        }
    }
});