Firing onDndDrop for dropping a floatingpane

Submitted by ruprict on Fri, 05/09/2008 - 17:31.

Is it possible to create a dndsource, dndtarget that allows me to fire drag and drop actions when I drag and drop a Floating Pane? I have tried creating a dnd.source based from the floatingpane.domNode and creating a div as the dnd.target, but I can't get the events to fire.

I should probably mention that I am very new to the dnd stuff.

<head>
<title>Float my boat</title>
<style type="text/css">

@import url("http://o.aolcdn.com/dojo/1.1.0/dijit/themes/tundra/tundra.css");
@import url("http://o.aolcdn.com/dojo/1.1.0/dojox/layout/resources/FloatingPane.css");
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js.uncompressed.js" djConfig="parseOnLoad:true"></script>
<script type='text/javascript' src='http://o.aolcdn.com/dojo/1.1.0/dijit/dijit.xd.js'></script>
<script language="JavaScript" someProperty="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.layout.FloatingPane");
dojo.require("dojo.dnd.Source");

var dndSource,dndTarget;
function load(){
   dndSource=new dojo.dnd.Source(dojo.byId("floater"),
{
checkAcceptance: function(source, nodes) {
return true;
},
// Override the onDndDrop method so that we can do what we want with the drop event.
onDndDrop: function(source, nodes, copy) {
alert("ouch");
return;

}
});
   dndTarget = new dojo.dnd.Target(dojo.byId("myTarget"));
dojo.mixin(dndTarget, {

checkAcceptance: function(source, nodes) {
return true;
},
// Override the onDndDrop method so that we can do what we want with the drop event.
onDndDrop: function(source, nodes, copy) {
alert("ouch");
return;

}
});
}

dojo.addOnLoad(load);
</script>
</head>
<body class="tundra">

<div dojoType="dojox.layout.FloatingPane" id="floater" title="test" resizeable="true" style="height:200px;width:200px">
Float Me? Float YOU.
</div>

<div id="myTarget" style="width:400px;height:400px;border:thin solid black">

</div>
</div>

</body>

Login or register to post comments
Subscribe post

list listen to drag/stop...

Submitted by dante on Fri, 05/09/2008 - 18:02.

list listen to drag/stop... dojo.subscribe("/dnd/drag/stop", function(n){ }); ?

Doesn't seem to work. I

Submitted by ruprict on Fri, 05/09/2008 - 20:30.

Doesn't seem to work. I tried to subsribe to "/dnd/drop", but it doesnt' fire when I drop the floatingpane.

Thanks,
Ruprict

It is hard to pinpoint the

Submitted by eugene on Fri, 05/09/2008 - 20:56.

It is hard to pinpoint the exact problem, so I try to list them:

It looks like between lines with dndSource and dndTarget you have an invalid JavaScript.
Your floating pane is not a DnD item, it doesn't belong to any source ⇒ it's move is not controlled by DnD.
Your floating pane is a source of DnD items. DnD doesn't move sources and targets, but moves DnD items they host.
Overwriting onDndDrop() prevents all normal DnD processing. You can do it only if you are 100% sure what you are doing. Typical use of onDndDrop() is to dojo.connect() to it instead of overwriting.

I can recommend to read the documentation first, which is hosted here: http://docs.google.com/Doc?id=d764479_11fcs7s397

Thanks for the doc

Submitted by ruprict on Mon, 05/12/2008 - 14:43.

Thanks for the doc link.

REading through that, it seems that in order to get the FloatingPane to fire DnD events, I would have to add it to a source. Unless I am mistaken (and I probably am), the only things that can be added to a DnD source are HTML items. So, if I override the toString() method on my FLoatingPane to return this.domNode.parentNode.innerHTML, it works (seemingly). However, this feels like a big hack and a long way home to just get an event to fire when I drop the FloatingPane.

I guess option 2 is to basically recreate the HTML structure of the FLoatingPane from scratch and add that to the dnd Source, eh?

Any other ideas?

Again, thanks for the help.

DnD items do not fire

Submitted by eugene on Wed, 05/14/2008 - 07:07.

DnD items do not fire events. DnD sources and the manager do. I don't think that overriding toString() is the good idea. Try to find some other solution. For example, you stressed that you want "to get the FloatingPane to fire DnD events"? Why? Is it the only way to do your actions? Is there any other way with FloatingPane? Frankly I don't understand what problem you are trying to solve, and I cannot deduce it from your posts. Sorry.

Thanks for the reply. Sorry

Submitted by ruprict on Wed, 05/14/2008 - 11:59.

Thanks for the reply. Sorry that I can't explain myself better.

All I want is to be able to hook into the drop event of a floatingpane. So, when the user drags a FloatingPane, then drops it, I want to run some code. I don't know any other way to put it.

The reason, which I don't think adds much, is that when a user drags and drops the FloatingPane I have created, the z-index of the floatingpane domnode is reset to 100. This is placing it *under* other HTML widgets on the page (widgets that are out of my control) so if I could reset the z-index to what I need it to be, then I'd be golden.

Does that clear it up at all? Again, thanks for taking the time to reply.

there is a zStart attribute

Submitted by dante on Wed, 05/14/2008 - 12:29.

there is a zStart attribute you can use to adjust the root z-index used when adjusting the zorder.

also, you can be alerted any time a FLoatingPane is dropped by subscribing to dnd/move/stop ... FloatingPane uses a dojo.dnd.Moveable, and is not a "DnD Item" in the conventional sense.

dojo.subscribe("/dnd/move/stop",function(n){
// one of these will be the FloatingPane: give it a shot
console.log(n.node, dijit.byNode(n.node), dijit.getEnclosingWidget(n.node));
});

Bingo! Thank you! Thank

Submitted by ruprict on Wed, 05/14/2008 - 14:10.

Bingo! Thank you! Thank you!

Fantastic.

BTW, the attribute seems to be _startZ. I was under the impression that anything starting with an underscore is meant to be private, but zStart didn't work, _startZ did.

Thanks again.