Ext4.2：树节点数据向表格拖拽_js将节点从树中拖拽到表格中-优快云博客

本文链接：https://blog.youkuaiyun.com/u011605971/article/details/24172267

直接使用Ext的插件拖拽时连节点都拖过去了，下面的实现是我在项目中需要用到的，也就是节点的数据过去了但是节点不过去，我把完整代码贴出来以便需要的朋友可以直接运行看效果

<html>
<head>
<link rel="stylesheet" type="text/css" href="./ExtJS4/resources/css/ext-all.css" />
<script type="text/javascript" src="./ExtJS4/ext-all.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		var tree = new Ext.tree.TreePanel({
			id : 'tree',
			viewConfig : {
				plugins : {
					ddGroup : 'demo',
					ptype : 'treeviewdragdrop',
					enableDrop : false
				}
			},
			store : new Ext.data.TreeStore({
				root : {
					text : 'Root',
					children : [ 
					             {text : 'Son1',leaf : true}, 
					             {text : 'Son2',leaf : true}, 
					             {text : 'Son3',leaf : true} 
					           ]
				}
			}),
		});
		tree.render('tree');
		tree.getRootNode().expand(false, true);

		var columns = [ {
			header : '编号',
			dataIndex : 'id'
		}, {
			header : '名称',
			dataIndex : 'name'
		} ];

		var data = [ 
		             [ '1' ], 
		             [ '2' ], 
		             [ '3' ], 
		             [ '4' ], 
		             [ '5' ] 
		           ];

		var store = new Ext.data.ArrayStore({
			data : data,
			fields : [ {name : 'id'}, {name : 'name'}]
		});
		store.load();

		var tmp="";
		
		var grid = new Ext.grid.GridPanel({
			id:'grid',
			autoHeight : true,
			renderTo : 'grid',
			store : store,
			columns : columns,
			listeners:
			{
				'itemmouseup':function(obj,record,item,index,e,eOpts)
				 {
					grid.getStore().getAt(index).set('name',tmp);
			     }
			}
		});
		(function(){
			var gridEl=Ext.getCmp('grid').body.dom;
			var gridDropTarget=Ext.create('Ext.dd.DropTarget',gridEl,{
				ddGroup:'demo',
				notifyEnter:function(source,e,data){
					data.records[0].get("text");
					tmp=data.records[0].get("text");
				}
			});
		})();		
	});
</script>
</head>
<body>
	<div id="tree"></div>
	<div id="grid"></div>
</body>
</html>

最终效果如下