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 = $('<div class="tree-node-proxy tree-dnd-no"></div>').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

});

}

}

}

});

}