[SOLVED] Drag div from centre panel to tree node

[crafter]

Hi

I've been trying to get this going, but now It's time to reach out for help ;).

I have a list of divs are of class 'thumb-wrap' that contain images that should be drapped to a tree. The divs are generated from the server.


<div class='thumb-wrap' id='image1.png'>
<img ,,, />
</div/>
<div class='thumb-wrap' id='image1.png'>
<img ,,, />
</div/>


First I needed to enable drag on each of the elements. I've done this.



Ext.DomQuery.select("*[class=thumb-wrap]");
Ext.each(coll, function(el) {
id = el.getAttribute("id");
new Ext.dd.DragSource(id, {dragData:{id: id}});
});


Now I need to capture the drop against the node. THis is where I need guidance.

A tree exists within a div in the west region.


tree = new Tree.TreePanel(target, {
animate:true,
// enableDD:true,
enableDrop:true,
containerScroll: true,
ddGroup: 'organizerDD',
rootVisible:false,
loader: new Tree.TreeLoader({
dataUrl:'<?= site_url(); ?>/cpanel/gallery/getjsontree'
})
});


I need to capture the drop against a node (panet node, not leaft type).

I can capture the drop as follows:


// Does not work
// tree.on('dragdrop', function(node){
// debugger;
// console.log('drag/dropped');
// });

// This works
// tree-container is a div that contains the tree.
var droptarget=new Ext.dd.DropTarget("tree-containerr", "mytreegroup");
droptarget.notifyDrop=function(dd, e, data){
console.log("1 : dropped " + dd.id + " on dragtarget", data);
return true;
}


The motifydrop catches, but I'm unsure how to resolve the affected tree node from there.

The tree.on does not seem to be firing.

Can anyone point out the resolution I require.

[crafter]

I'm not really making progress, but from Jack's suggestions in this thread, I have a possible around.
http://extjs.com/forum/showthread.php?t=4034&highlight=grid+drag+drop+treepanel&page=2

OK. My scenario again:-
- I have a series of divs (containing images) that I need to drop on a tree

- I am able to assign a drg to the divs. Just to be safe, I've chaged my code enough to assign the
div to a ddd group.


var coll = Ext.DomQuery.select("*[class=thumb-wrap]");
Ext.each(coll, function(el) {
id = el.getAttribute("id");
dd = new Ext.dd.DragSource( id,
{dragData:{id: id}}
);
dd.addToGroup('organizerDD'); // Added this


- The tree events (nodedrop, dragdrop, beforedragdrop were not firing, but the notifydrop was.

- Even the solution suggested by Jack in the linked thread failed to work.

- So, I forced the event to fire from the notifydrop event.


var droptarget=new Ext.dd.DropTarget("tree-container", "organizerDD");
droptarget.notifyDrop=function(dd, e, data){
tree.fireEvent("nodedrop", e); // Added this
return true;
}


- Now the nodedrop fires.
// This now fires!!!


tree.on('nodedrop', function(node){
// Node is not I expecty
console.log('drag/dropped');
});


- However, node is the tree-container DIV that holds my tree. I realise that's because of my droptarget definition.

var droptarget=new Ext.dd.DropTarget("tree-container", "organizerDD");

I should be adding the id the tree, if I can figure out how to get it.
(Try searching for 'id' in the forum ;) )

[crafter]

Some "progress" to report.

1. Changed droptarget definition as follows:

var droptarget=new Ext.dd.DropTarget(tree.getEl(), { ddGroup : 'organizerDD'});

(No real difference. Perhaps just the cotrect way to do it! ?

In nodedrop handler, the tree is accessed as follows:


tree.on('nodedrop', function(node){
var x = tree;
});


Why the tree events are not firing is still unresolved.

[JoSsiF]

Hi crafter,

I'm struggling with the same issue at the moment. Have you found a proper solution in the meantime?

Maybe iterating through the whole tree and creating a dropTarget for each node would be a way to try, but I haven't tried that yet.

Any suggestions would be appreciated :)

thx
JoSsiF

[crafter]

No JoSsiF, no progress.

Someone reportde that selecting the node before the drop brings the expected results. I noted that too. but since then I changed my code and I can't recall when that worked. You may want to try.

[JoSsiF]

Thanks anyway :)

[crafter]

OK, I've aged significantly in the past week, but I thing I have a solution. Its probably not the ideal one, and it may not work for you.

Just a few notes I want to add:

You must create (overwrite) notifyDrop, which by default is set to an empty function, otherwise nothing seems to get fired.


There seems to be problems with the treenode recieving the event if the tree and source are in diffrent panels. My solution DOES WORK WITH TREE IN WEST PANEL AND SOURCE IN CENTRE PANEL.


Some solutions (by Jack) suggested adding a dropConfig property to the tree node. This causes problems.


On the treenode properties enableDD:true creates problems. Using enableDrop works.
Events don't fire as expected. nodedragover and beforenodedrop fires, nodedrop and dragdrop don't.


The treenode must be highlighted for the beforedrop event to fire. If you click the node before the drop, it works, otherwise (maybe) not. I select this programmatically.


So to recap the way my solution currently works.
I load a list of divs with images onto my center panel. Each image is wrpped in a dix with class thumb-wrap.


<div class='thumb-wrap' id='image1.png'>
<img ,,, />
</div/>
<div class='thumb-wrap' id='image1.png'>
<img ,,, />
</div/>


The server generates the markup above, which is laoded into my centre panel.


function load_image_list() {
var panel = Ext.get('center-div');
panel.load({
url: '/gallery/imagelist/',
callback: function() {

// Add each image container to the drag drop group
var coll = Ext.DomQuery.select("*[class=thumb-wrap]");
Ext.each(coll, function(el) {
id = el.getAttribute("id");
dd = new Ext.dd.DragDrop(id, "organizerDD");
dd = new Ext.dd.DragSource( id, {dragData:{id: id}} );
dd.addToGroup('organizerDD');
});

// NOTE: THIS DOES NOT FIRE
dd.onDragDrop = function(e, id) {
console.log("dd was dropped on " + id);
}

// Regsiter the drop target
var droptarget=new Ext.dd.DropTarget("tree-container");

// NOTE: THIS DOES NOT FIRE
droptarget.notifyDrop=function(dd, e, data){
console.log("1 : dropped " + dd.id + " on dragtarget", data);
}

},
nocache: false,
text: "Loading gallery images..." ,
showLoadIndicator: true,
disableCaching: false,
loadScripts: true
});
}


So, so much for the drag portion. The tree node receives the drop. The tree must belong to the same group as the target, The node must be selected for the drop to happen and the notifydrop must be defined, otherwise, NADA.


tree = new Tree.TreePanel(target, {
animate:true,
/* enableDD:true, < -- DOES NOT WORK -- > */
enableDrop:true, /* THIS WORKS */
containerScroll: true,
ddGroup: 'organizerDD',
// Suggested by Jack in a post, but causes events not to fire.
// dropConfig: {
// completeDrop : function(e){
// debugger;
// e.target.ui.endDrop();
// e.target.ui.highlight(); // remove this if you don't want it
// this.tree.fireEvent("nodedrop", e);
// }
// },
/* rootVisible:false,*/
loader: new Tree.TreeLoader({
dataUrl:'/gallery/getjsontree'
})
});

// For some reason, the tree events are not being fired. However,
// ...installing a droptarget and overwriting the notifyDrop events
// ...works.
var droptarget=new Ext.dd.DropTarget(tree.getEl(), { ddGroup : 'organizerDD'});
droptarget.notifyDrop=function(dd, e, data){
console.log("In notifydrop handler" );
return true;
}

// DOES NOT FIRE
tree.on('dragdrop', function(node){
debugger;
});

// DOES NOT FIRE
tree.on('nodedrop', function(node){
debugger;
});

// FIRES
tree.on('beforenodedrop', function(e){
// Store the data comming accross
var in_data = e.data;
// Get the target noded
var target = e.target
console.log('in before node drop:' + e.target.id);
});

// FIRES before beforenodedrop. Using event to highlight node
tree.on('nodedragover', function treeNodeDragOver(e){
e.target.ui.endDrop();
e.target.ui.highlight(); // remove this if you don't
console.log("Fired event nodedragover");
});

// set the root node
root = new Tree.AsyncTreeNode({
text: 'Galleries',
allowDrag:false,
allowDrop:false,
draggable:false,
id:'tree-container'
});

tree.setRootNode(root);


Now, if you can tell me how to remove the highlight. I'm just too zapped to look at the manual again.8-|

[JoSsiF]

Thanks a lot, crafter!

Adapting some parts of your code I got mine to work. The highlighting part was even not necessary. The only thing I subsequently have to do is to get some data from the drag source. This is a grid in my case, however, the whole container is not the desired source of course. Think this should be painless though - at least I hope so ;)

Thanks again :)

JoSsiF