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

[mhubert]

Ok -- thanks that was one thing.

The second thing that needed changing is the function needs to be applied to the other tree


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


below is a trick to prvent duplicating nodes dragged from inside the tree. This allows user sorting but prevents making additional copies


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

[Sridhar.Prabhakar]

while copying a node, the node is copied with the same Node ids. Which later leads o problems. Is there a way to change the node ids while creating the copy?

I had this method implemented. but for some reason, the ids are not changed. The append string is passed as "".


function changeNodeIds(node, appendStr) {
var chldNodes;
alert(appendStr);
alert(node.id);
if (node.id.length == 0) {
chldNodes = node.attributes.children;
} else {
chldNodes = node.children;
}
var leafCount = 0;
var compCount = 0;
if (chldNodes != null) {
for (var i=0;i<chldNodes.length;i++) {
var chldNode = chldNodes[i];
if (chldNode.leaf) {
leafCount++;
chldNode.id=appendStr+alphabets.substring(leafCount-1,leafCount);
//alert("Leaf Node - "+chldNode.id);
} else {
compCount++;
if (appendStr.length == 1) {
chldNode.id=appendStr+(compCount);
//alert("Node Id - "+appendStr+(compCount));
} else {
chldNode.id=appendStr+"."+(compCount);
//alert("Node Id - "+appendStr+"."+(compCount));
}
changeNodeIds(chldNode, chldNode.id);
}
}
}
}

[para]

This works for me...
I add a clone() function to Ext.tree.TreeNode



Ext.override(Ext.tree.TreeNode, {
clone: function() {
var atts = this.attributes;
atts.id = Ext.id(null, "ynode-");
var clone = new Ext.tree.TreeNode(Ext.apply({}, atts));
clone.text = this.text;

for(var i=0; i<this.childNodes.length; i++){
clone.appendChild(this.childNodes[i].clone());
}
return clone;
}
});


Then I use:


tree.on('beforenodedrop', function(e){
if(e.rawEvent.ctrlKey) { // or whatever criteria you want to make for doing a copy instead of a move
e.dropNode = e.dropNode.clone();
}
});

[broutard]

Thanks, but this copy work partialy...

When you copy a non-opening folder, you can't open the copy :(

Example here : http://www.chassemy.org/sesamath/tree/two-trees.html

nb: To prevent duplicating nodes dragged from inside the tree I have writed this :


tree2.on('beforenodedrop', function(e){
if(e.source.tree.el != e.target.ownerTree.el) {
e.dropNode = e.dropNode.clone();
}
});


Anyone can help me please ?

[para]

That is because the function was made to work with TreeNode, not AsyncTreeNode.
Here's a better version:



Ext.override(Ext.tree.TreeNode, {
clone: function() {
var atts = this.attributes;
atts.id = Ext.id(null, "ynode-");
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);
}
newNode.text = this.text;
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) {
n.id = undefined;
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;
},

});


I'm sure there's a more efficient way to do this though.

[dtondo]

good, works for me, only comment this line: //newNode.text = this.text;

thanks


That is because the function was made to work with TreeNode, not AsyncTreeNode.
Here's a better version:



Ext.override(Ext.tree.TreeNode, {
clone: function() {
var atts = this.attributes;
atts.id = Ext.id(null, "ynode-");
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);
}
newNode.text = this.text;
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) {
n.id = undefined;
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;
},

});
I'm sure there's a more efficient way to do this though.

[andregufc]

Complete solution:



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) {
//n.id = undefined;
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;
}

});

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) {
//n.id = undefined;
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;
}

});

=================================================================

'beforenodedrop': function(e)
{
if(e.source.tree == e.target.ownerTree)
{
return true;
}
var n = e.dropNode; // the node that was dropped
var existNode = e.target.ownerTree.getNodeById(n.id);
if(e.source.tree.el != e.target.ownerTree.el&&existNode==undefined)
{
e.dropNode = n.clone(); // assign the copy as the new dropNode
}
else
{
return false;
}
}