EasyUI-treegrid-拖拽的实现(drag and drop)

先声明下，核心代码是从国外论坛找的，我只是加了个获取 源节点ID跟目的节点ID  然后用EasyUI的API实现

用法：onLoadSuccess: function (row, param) {
                    enableDnd(TreeGrid);
                }

个人感觉，把这个函数放在 onLoadSuccess是合适的，总得等节点加载完嘛

function enableDnd(t) {
                var srcID = null;
                var nodes = t.treegrid('getPanel').find('tr[node-id]');
                nodes.find('span.tree-hit').bind('mousedown.treegrid', function () {
                    return false;
                });
                nodes.draggable({
                    disabled: false,
                    revert: true,
                    cursor: 'pointer',
                    proxy: function (source) {
                        var p = $('

').appendTo('body');
                        p.html($(source).find('.tree-title').html());
                        p.hide();
                        return p;
                    },
                    deltaX: 15,
                    deltaY: 15,
                    onBeforeDrag: function () {
                        $(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'no-accept' });
                    },
                    onStartDrag: function () {
                        srcID = $(this).attr("node-id");
                        $(this).draggable('proxy').css({
                            left: -10000,
                            top: -10000
                        });
                    },
                    onDrag: function (e) {
                        $(this).draggable('proxy').show();
                        this.pageY = e.pageY;
                    },
                    onStopDrag: function () {
                        $(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'tr[node-id]' });
                    }
                }).droppable({
                    accept: 'tr[node-id]',
                    onDragOver: function (e, source) {
                        var pageY = source.pageY;
                        var top = $(this).offset().top;
                        var bottom = top + $(this).outerHeight();
                        $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
                        $(this).removeClass('row-append row-top row-bottom');
                        if (pageY > top + (bottom - top) / 2) {
                            if (bottom - pageY < 5) {
                                $(this).addClass('row-bottom');
                            } else {
                                $(this).addClass('row-append');
                            }
                        } else {
                            if (pageY - top < 5) {
                                $(this).addClass('row-top');
                            } else {
                                $(this).addClass('row-append');
                            }
                        }
                    },
                    onDragLeave: function (e, source) {
                        $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
                        $(this).removeClass('row-append row-top row-bottom');
                    },
                    onDrop: function (e, source) {
                        var action, point;
                        if ($(this).hasClass('row-append')) {
                            action = 'append';
                        } else {
                            action = 'insert';
                            point = $(this).hasClass('row-top') ? 'top' : 'bottom';
                        }
                        $(this).removeClass('row-append row-top row-bottom');
                        var desID = $(this).attr("node-id");
                        //弹出当前拖拽的node
                        var srcNode = t.treegrid('pop', srcID);
                        if (action == "append") {
                            t.treegrid('append', {
                                parent: desID,
                                data: [srcNode]
                            });
                        } else if (action == "insert") {
                            if (point == "top") {
                                t.treegrid('insert', {
                                    before: desID,
                                    data:srcNode
                                });
                            } else {
                                t.treegrid('insert', {
                                    after: desID,
                                    data: srcNode
                                });
                            }
                        }
                    }
                });
            }