how can copy the Item but not cut it on the Drag and Drop ?

[vicent]

Any one can give me a suggest about .. how can I copy the item to another place ? that mean the original item still on the original place

[Animal]

I think that would be up to your implementation to decide whether to remove the original or not. The DragDrop system just informs you of user actions. You write the code to move data around and possibly remove data from the source.

[vicent]

Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;

var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
enableDD:true,
containerScroll: true
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();
});

could you please tell me how can I config on these code ? I just want it doesn't remove when drop on another place

[Animal]

I know as much as you about this.

But I'm sure it's possible. You just have to listen for the right events.

[jack.slocum]

You are going to love how easy it is.

Copy the node before the drop is processed and change the dropNode:

tree.on('beforenodedrop', function(e){
    var n = e.dropNode; // the node that was dropped
    var copy = new xt.TreeNode( // copy it
          Ext.apply({}, n.attributes) 
    );
    e.dropNode = copy; // assign the copy as the new dropNode
});

[vicent]

Animal , Jack
Thanks a lot for your help !

[Animal]

Jack, would it be possible to have the mousedown handler record the state of the control key, and have the default processing do a copy if the node drag was started with CTRL+MOUSEDOWN?

That would have to be an optional feature because sometimes you don't want copying.

[para]

When I implemented the snippet given by Jack above, it only copies the node which was dragged, not its children as well. I wrote this little happy function that copies the children as well.

I've only been working with JavaScript for about 2 weeks now, so I apologize if the code isn't the prettiest. I'm still working on learning the different syntaxes for loops.

tree.on('beforenodedrop', function(e){
	e.dropNode = copyDropNode(e.dropNode);
});


function copyDropNode(node){
	var newNode = new Ext.tree.TreeNode(Ext.apply({}, node.attributes));
		for(var i=0; i < node.childNodes.length; i++){
		n = node.childNodes[i];
		if(n){
			newNode.appendChild(copyDropNode(n));
		}
	}
	return newNode;
}

[mhubert]

/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
* 
* http://www.extjs.com/license
*/
var TreeTest = function(){
// shorthand
var Tree = Ext.tree;
 
return {
init : function(){
var tree = new Tree.TreePanel('reports', {
animate:true, 
loader: new Tree.TreeLoader({dataUrl:'get-report-tree.html'}),
enableDrag:true,
containerScroll: true
// ,dropConfig: {appendOnly:true}
});
 
// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});
 
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Reports', 
draggable:false,
id:'reports'
});
tree.setRootNode(root);
tree.on('beforenodedrop', function(e){
var n = e.dropNode; // the node that was dropped
var copy = new xt.TreeNode( // copy it
Ext.apply({}, n.attributes) 
);
e.dropNode = copy; // assign the copy as the new dropNode
});
 
// render the tree
tree.render();
 
root.expand(false, /*no anim*/ false);
 
//-------------------------------------------------------------
 
var myfavreport = new Tree.TreePanel('myfavreports', {
animate:true, 
//rootVisible: false,
loader: new Ext.tree.TreeLoader({
dataUrl:'get-myfavreport-tree.html'
// ,baseParams: {lib:'yui'} // custom http params
}),
containerScroll: true,
enableDD:true,
dropConfig: {appendOnly:true}
});
 
// add a tree sorter in folder mode
new Tree.TreeSorter(myfavreport, {folderSort:true});
 
// add the root node
var root2 = new Tree.AsyncTreeNode({
text: 'My Favorit Reports', 
draggable:false, 
id:'myfavreports'
});
myfavreport.setRootNode(root2);
myfavreport.render();
 
myfavreport.expand(false, /*no anim*/ false);
}
};
}();
Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

I tried using this suggestion and did the above -- but it does NOT copy?

What did I miss?

Thanks

[vicent]

/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
* 
* http://www.extjs.com/license
*/
var TreeTest = function(){
// shorthand
var Tree = Ext.tree;
 
return {
init : function(){
var tree = new Tree.TreePanel('reports', {
animate:true, 
loader: new Tree.TreeLoader({dataUrl:'get-report-tree.html'}),
enableDrag:true,
containerScroll: true
// ,dropConfig: {appendOnly:true}
});
 
// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});
 
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Reports', 
draggable:false,
id:'reports'
});
tree.setRootNode(root);
tree.on('beforenodedrop', function(e){
var n = e.dropNode; // the node that was dropped
var copy = new xt.TreeNode( // copy it
Ext.apply({}, n.attributes) 
);
e.dropNode = copy; // assign the copy as the new dropNode
});
 
// render the tree
tree.render();
 
root.expand(false, /*no anim*/ false);
 
//-------------------------------------------------------------
 
var myfavreport = new Tree.TreePanel('myfavreports', {
animate:true, 
//rootVisible: false,
loader: new Ext.tree.TreeLoader({
dataUrl:'get-myfavreport-tree.html'
// ,baseParams: {lib:'yui'} // custom http params
}),
containerScroll: true,
enableDD:true,
dropConfig: {appendOnly:true}
});
 
// add a tree sorter in folder mode
new Tree.TreeSorter(myfavreport, {folderSort:true});
 
// add the root node
var root2 = new Tree.AsyncTreeNode({
text: 'My Favorit Reports', 
draggable:false, 
id:'myfavreports'
});
myfavreport.setRootNode(root2);
myfavreport.render();
 
myfavreport.expand(false, /*no anim*/ false);
}
};
}();
Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

I tried using this suggestion and did the above -- but it does NOT copy?

What did I miss?

Thanks

var copy = new xt.TreeNode( // copy it
change to
var copy = new Ext.tree.TreeNode