Drag and drop between tree and datagrid

[CLKG]

Is there any way that I can simply drag the grid's row onto a tree?
I can make the rows draggable:

Code:

onLoadSuccess: function (data) {
            var opts = $.data(this, 'datagrid').options;
            var trs = opts.finder.getTr(this, 0, 'allbody');
            trs.draggable({
                revert: true,
                proxy: 'clone'
            });
        }

But the tree(with dnd set to true) doesn't accept it……

[stworthy]

You must custom the datagrid proxy to make it draggable over the tree panel. The code below shows how to achieve this functionality.

Code:

$('#dg').datagrid({
	onLoadSuccess: function(){
		var opts = $(this).datagrid('options');
		var trs = opts.finder.getTr(this, 0, 'allbody');
		trs.draggable({
			revert: true,
			proxy: function(source){
				var p = $('<div style="border:1px solid #ccc;"></div>');
				p.html($(source).html()).appendTo('body');
				return p;
			}
		})
	}
})

You also need to custom the droppable tree to accept the dragging rows. This is a complex job. You must decide how to insert a new row to the tree, whether to delete the original row when dropped it successfully, etc.

[CLKG]

You must custom the datagrid proxy to make it draggable over the tree panel. The code below shows how to achieve this functionality.
You also need to custom the droppable tree to accept the dragging rows. This is a complex job. You must decide how to insert a new row to the tree, whether to delete the original row when dropped it successfully, etc.

Thank you! So the proxy must be appended to the body element.
But I donno how to custom the droppable tree like:
1 dnd = true cause that's exactly what I need.
2 When a grid's row dropped, don't do anything to the tree, and then change the row's category field and refresh the datagrid.
But it's hard for me, I donno how the tree's dnd works and what kind of element does the tree accepts.

[stworthy]

The code below shows how to custom the droppable on tree nodes. Of course, you need to modify it to meet your requirement.

Code:

$('#dg').datagrid({
	onLoadSuccess: function(){
		var dg = $(this);
		var opts = $(this).datagrid('options');
		var trs = opts.finder.getTr(this, 0, 'allbody');
		trs.draggable({
			revert: true,
			deltaX: 15,
			deltaY: 15,
			proxy: function(source){
				var index = parseInt($(this).attr('datagrid-row-index'));
				var title = dg.datagrid('getRows')[index]['itemid'];
				var p = $('<div class="tree-node-proxy"></div>').appendTo('body');
				p.html('<span class="tree-dnd-icon tree-dnd-no">&nbsp;</span>'+title);
				return p;
			}
		})
	}
});

$('#tt').tree({
	onLoadSuccess: function(){
		$(this).find('.tree-node').each(function(){
			var opts = $(this).droppable('options');
			opts.accept = '.tree-node,.datagrid-row';
			var onDragEnter = opts.onDragEnter;
			var onDragOver = opts.onDragOver;
			var onDragLeave = opts.onDragLeave;
			var onDrop = opts.onDrop;
			opts.onDragEnter = function(e,source){
				if ($(source).hasClass('tree-node')){
					onDragEnter.call(this, e, source);
				}
			};
			opts.onDragOver = function(e,source){
				if ($(source).hasClass('tree-node')){
					onDragOver.call(this, e, source);
				} else {
					allowDrop(source, true);
					$(this).removeClass('tree-node-append tree-node-top tree-node-bottom');
					$(this).addClass('tree-node-append');

				}
			};
			opts.onDragLeave = function(e,source){
				if ($(source).hasClass('tree-node')){
					onDragLeave.call(this, e, source);
				} else {
					allowDrop(source, false);
					$(this).removeClass('tree-node-append tree-node-top tree-node-bottom');
				}
			};
			opts.onDrop = function(e,source){
				if ($(source).hasClass('tree-node')){
					onDrop.call(this, e, source);
				} else {

				}
			};

			function allowDrop(source, allowed){
				var icon = $(source).draggable('proxy').find('span.tree-dnd-icon');
				icon.removeClass('tree-dnd-yes tree-dnd-no').addClass(allowed ? 'tree-dnd-yes' : 'tree-dnd-no');
			}
		})
	}
});