tree拖拽

当时遇到如下问题：

拖拽A tree 的a节点到B tree ，a节点可以顺利地被添加到了B tree中，我的问题是如何此时还让a 节点留在在A tree中，而不是彻底给了B tree。

这里做一下当时的一种解决方法，或许不是最好的方法 （大概思路是退拽完 往回追加所拖拽的node）

当时ext使用版本 3.3

首先 使tree的node具有clone方法

代码如下：

  

Ext.override(Ext.tree.TreeNode, {
     clone: function() {
	    var atts = this.attributes;
             if(this.childrenRendered || this.loaded || !this.attributes.children) {
				var clone = new Ext.tree.TreeNode(Ext.apply({}, atts));
     		 }
		     else {
					var newAtts = Ext.apply({}, atts);
					newAtts.children = this.cloneUnrenderedChildren();
					var clone = new Ext.tree.AsyncTreeNode(newAtts);
		     }
      		clone.text = this.text;
		    for(var i=0; i<this.childNodes.length; i++){
				clone.appendChild(this.childNodes[i].clone());
		    }
		    return clone;
	  },
	
    cloneUnrenderedChildren: function() {
      	unrenderedClone = function(n) {
	        if(n.children) 
	        {
				for(var j=0; j<n.children.length; j++) {
				   n.children[j] = unrenderedClone(n.children[j]);
				}
	        }	
	        return n;
    	 };
    	var c = [];
		for(var i=0; i<this.attributes.children.length; i++) {
				c[i] = Ext.apply({}, this.attributes.children[i]);
				c[i] = unrenderedClone(c[i]);
		}
			return c;
		}
});

 下面造2个树 ：

    第1个树

       // yui-ext tree
            var tree = new Tree.TreePanel({
                animate:true, 
                autoScroll:true,
                loader: new Tree.TreeLoader(),
                enableDD:true,
                containerScroll: true,
                border: false,
                width: 250,
                height: 300,
                dropConfig: {appendOnly:true}
            });
            
            
            // set the root node
            var root = new Tree.AsyncTreeNode({
                text: 'Ext JS', 
                draggable:false, // disable root node dragging
                id:'src',
    children: [
     {text: '节点1',id:"node_1",leaf: true},
     {text: '节点2',id:"node_2",leaf: false,children: [
      {text: '节点21',id:"node_21",leaf: true},
      {text: '节点22',id:"node_22",leaf: true}
     ]}
    ]
            });
            tree.setRootNode(root);
            
            tree.render('tree');
            
            root.expand(true, true);

 第2个树：

         // ExtJS tree            
            var tree2 = new Tree.TreePanel({
                animate:true,
                autoScroll:true,
                rootVisible: false,
                loader: new Ext.tree.TreeLoader(),
                containerScroll: true,
                border: false,
                width: 250,
                height: 300,
                enableDrop :true,
                dropConfig: {appendOnly:true,allowParentInsert:false},
                listeners:{
						"contextmenu":function(node,e){
							var menu = new Ext.menu.Menu([
								{text:"上移",iconCls:'up',handler:function(){
										var nodeUp =  new Ext.tree.TreeNode(Ext.apply({}, node.attributes));;
										var previousNode = node.previousSibling; 
										var pNode = node.parentNode;
										node.remove();
										pNode.insertBefore(nodeUp,previousNode);
									}
								},
								{text:"下移",iconCls:'down',handler:function(){
										var nodeUp =  new Ext.tree.TreeNode(Ext.apply({}, node.nextSibling.attributes));;
										var previousNode = node.previousSibling; 
										var pNode = node.parentNode;
										node.nextSibling.remove();
										pNode.insertBefore(nodeUp,node);										
									}
								},
								{text:"删除",iconCls:'right_delete',handler:function(){
										node.parentNode.removeChild(node);
									}
								},								
								{text:"重命名",iconCls:'right_rename',menu:new Ext.menu.Menu({
								        items: [
								           new Ext.form.FormPanel({
											        title: '输入',
											        frame: true,
											        defaultType: 'textfield',
											        labelWidth: 30,
											        width:190,
											        items: [{
											            fieldLabel: '名称',
											            name: 'name'
											        }],
											        buttons: [{
											            text: '确认',
											            //scope:this,
											            handler:function(){
											              var s = this.findParentByType("form").form.findField("name").getValue();
											              node.setText(s);
											              menu.hide();
											            }
											        }, {
											            text: '取消',handler:function(){
											             menu.hide();
											            }
											        }]
											    })
								        ]
								    })
								}
							]);
							if(!node.previousSibling){
								menu.items.item(0).disable();
							}
							if(!node.nextSibling){
								menu.items.item(1).disable();
							}
							menu.showAt(e.getPoint());
						}
					}//监听结束	
            });
           
            
            // add the root node
            var root2 = new Tree.AsyncTreeNode({
                text: 'Extensions', 
                draggable:false, 
                id:'ux',
				children: [
					{text: '节点3',id:"node_3",zyid:"node_3",leaf: false,children: [
						{text: '节点22',id:"node_22",zyid:"node_22",leaf: true}
					]},
					{text: '节点4',id:"node_4",zyid:"node_4",leaf: false,children: [
						{text: '节点21',id:"node_2",zyid:"node_21",leaf: true}
					]}
				]
            });
		   tree2.on("beforenodedrop",function(e){
            	//alert( e.data.node.text );取得拖拽的node
            	if(e.dropNode.getOwnerTree()==tree){
            			if(e.data.node.hasChildNodes()){
		            		e.cancel=true;
		            		Ext.Msg.alert('系统提示', '不允许拖拽目录！');            				
            			}else{
	 		             	var isAllowDrag = true;
			            	var parentNode = e.target;
			            	var parentNodeChild = parentNode.childNodes;
			            	for(var i = 0;i<parentNodeChild.length;i++){
			            		if(parentNodeChild[i].attributes.zyid==e.dropNode.id){
			            			isAllowDrag=false;
			            			break;
			            		}	
			            	}
			            	if(isAllowDrag==true){
			            		e.cancel=false;
			            		e.dropNode = e.dropNode.clone(); //追加回节点
			            		e.dropNode.attributes.zyid = e.dropNode.id; 
			            		e.dropNode.allowChildren=false;
			            	}else{
			            		e.cancel=true;
			            		Ext.Msg.alert('系统提示', '此业务流程已经存在该节点！');
			            	}               			
            			
            			}
		            		
            	}; 
            })
            tree2.setRootNode(root2);
            tree2.render('tree2');
            
            root2.expand(true, true);

  

   

自此结束  以上仅是本人的一个做法  或许麻烦 或许有更好的办法