Drag and drop from html table row to jQuery treeview

Question

I need to create a view that supports drag from a table row and drop to a treeview, a bit like dragging a file to a folder in windows explorer.

Can some one recommenced a free jQuery based tree view that will support this and how it can be done. I haven't done jQuery drag/drop before, so I'm not sure what to look out for. I see plenty of widgets that support drag drop within the itself, but I'm not sure if it extends to other page elements.

My treeview can be loaded server-side as the nodes will be static. I'm using MVC4 for my serverside.

Answer 1

I have the same feature on my MVC project. Try using kendoUI. They have treeview control with drag and drop functionality.

Answer 2

I ended up using jstree. It does everything I need and more. The documentation is tricky to follow, but I has many users out there.

Basically all you do to make your tr (or any foreign element) draggable to tree nodes is to set class="jstree-draggable" on the element. The tree view is then initialised like this.

$("#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;
        }
    }
});