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

从html表行拖放到jQuery treeview

2 个答案: