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.

Search