Hello I am just started to use Dojo, and now using 0.9 version (daily svn build, 31-07) and have problems using the dnd function. I like todo:
- Disable the copy function, in my software there is no copy function
- Handle the drop action and do something with it
I did not find any real dnd example on this site where there is a custom action connected to the drop function. I tried to extend the Source object but what ever i do it simple does not does anything with my functions, it just called the default implementation. I already checked if the right object type is loaded, it it definitly using my own object type because if i remove my declare statement i get an expected error.
Please help me, I am stuck!
dojo.declare("my.dnd.mySource", dojo.dnd.Source, function(){// initialization function
console.debug('My own class is loaded!');this.breakCode();
},{ onDndStart: function(source, nodes, copy){ console.debug('Dnd starting..');}
}
);

It should be easy...
If you want to prohibit copying, you need to override Source.copyState() — it should always return "false". And you need to override Source.onDndDrop() to get on some drop action:
copyState: function( return false; },
onDndDrop: function(source, nodes, copy){
if(this.containerState == "Over"){
// we are the target
if(this == source){
// reordering items
// DO SOMETHING HERE
}else{
// moving items to us
// DO SOMETHING HERE
}
}
// call the original method
dojo.dnd.Source.onDndDrop.call(this, source, nodes, copy);
// of course you can call it before your own processing
// or somewhere inside your code --- it depends on your logic
}
});
It Does not WORK!
I used your code with the simple example code found on this site but I just can not get it to work. It looks like its using my own type but it is not working. Copying is still possible, and i can't get any alert from my test object.. I will post my complete test code, so you can test it your self.
<head>
<title>Simple DnD Example</title>
<style type="text/css">
.target {border: 1px dotted gray; width: 300px; height: 300px;padding: 5px;}
.source {border: 1px dotted skyblue;height: 200px; width: 300px;}
.bluesquare {height:50px;width:100%;background-color:skyblue}
.redsquare {height:50px;width:100%;background-color:red}
</style>
<script type="text/javascript" src="/libs/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.declare("my.dnd.mySource", dojo.dnd.Source, {
copyState: function(){ return false; },
onDndDrop: function(source, nodes, copy){
console.debug('onDndDRop!');
if(this.containerState == "Over"){
// we are the target
if(this == source){
// reordering items
console.debug('reordering items');
// DO SOMETHING HERE
}else{
// moving items to us
console.debug('moving items to us');
// DO SOMETHING HERE
}
}
// call the original method
console.debug('call the original method');
dojo.dnd.Source.onDndDrop.call(this, source, nodes, copy);
// of course you can call it before your own processing
// or somewhere inside your code --- it depends on your logic
}
});
</script>
</head>
<body style="font-size: 12px;">
<h1>A Simple Example</h1>
<table><tbody><tr>
<td>
<!-- Create a source with two nodes -->
<div dojoType="my.dnd.mySource" jsId="c1" class="source">
SOURCE
<div class="dojoDndItem" dndType="blue">
<div class="bluesquare">BLUE</div>
</div>
<div class="dojoDndItem" dndType="red,darkred">
<div class="redsquare">RED</div>
</div>
</div>
</td>
<td>
<!-- Create a target that accepts nodes of type red and blue. -->
<div dojoType="my.dnd.mySource" jsId="c2" class="target" accept="blue,darkred">
TARGET
</div>
</td>
</tr><tbody/></table>
</body>
</html>
Sorry, my bad.
Basically it doesn't work because of following reasons:
The corrected example is below:
<title>Simple DnD Example</title>
<style type="text/css">
.target {border: 1px dotted gray; width: 300px; height: 300px;padding: 5px;}
.source {border: 1px dotted skyblue;height: 200px; width: 300px;}
.bluesquare {height:50px;width:100%;background-color:skyblue}
.redsquare {height:50px;width:100%;background-color:red}
</style>
<script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.dnd.source");
dojo.declare("my.dnd.mySource", dojo.dnd.Source, {
markupFactory: function(params, node){
params._skipStartup = true;
return new my.dnd.mySource(node, params);
},
copyState: function(){ return false; },
onDndDrop: function(source, nodes, copy){
console.debug('onDndDrop!');
if(this.containerState == "Over"){
// we are the target
if(this == source){
// reordering items
console.debug('reordering items');
// DO SOMETHING HERE
}else{
// moving items to us
console.debug('moving items to us');
// DO SOMETHING HERE
}
}
// call the original method
console.debug('call the original method');
dojo.dnd.Source.prototype.onDndDrop.call(this, source, nodes, copy);
// of course you can call it before your own processing
// or somewhere inside your code --- it depends on your logic
}
});
</script>
</head>
<body style="font-size: 12px;">
<h1>A Simple Example</h1>
<table><tbody><tr>
<td>
<!-- Create a source with two nodes -->
<div dojoType="my.dnd.mySource" jsId="c1" class="source">
SOURCE
<div class="dojoDndItem" dndType="blue">
<div class="bluesquare">BLUE</div>
</div>
<div class="dojoDndItem" dndType="red,darkred">
<div class="redsquare">RED</div>
</div>
</div>
</td>
<td>
<!-- Create a target that accepts nodes of type red and blue. -->
<div dojoType="my.dnd.mySource" jsId="c2" class="target" accept="blue,darkred">
TARGET
</div>
</td>
</tr><tbody/></table>
</body>
Pay attention to "djConfig" settings. You don't need "isDebug" for production, but you do need "parseOnLoad". And you need to require the parser explicitly.
Don't forget to include missing <html></html>, which were eaten away by my editor.
Including dojo from aolcdn ...
Could someone explain why this example fails when I include dojo from aolcdn:
but works when I include it locally as so:
Thank you,
Michael
The example will fail with a
The example will fail with a CDN build since the dojo.declare call tries to use dojo.dnd.Source directly after doing the dojo.require() calls for dojo.parser and dojo.dnd.source. Since CDN/xdomain loading is an asynchronous loading, the module resources may have not been loaded by the time the dojo.declare call occurs.
To fix this, I would do the following: set djConfig parseOnLoad to false, then change the script block with the dojo.require and dojo.declare calls to something like this (notice the use of dojo.addOnLoad() and the manual call to dojo.parser at the end):
dojo.require("dojo.parser"); dojo.require("dojo.dnd.source"); dojo.addOnLoad(function(){ //Do the declare call dojo.declare("my.dnd.mySource", dojo.dnd.Source, { markupFactory: function(params, node){ params._skipStartup = true; return new my.dnd.mySource(node, params); }, copyState: function(){ return false; }, onDndDrop: function(source, nodes, copy){ console.debug('onDndDrop!'); if(this.containerState == "Over"){ // we are the target if(this == source){ // reordering items console.debug('reordering items'); // DO SOMETHING HERE }else{ // moving items to us console.debug('moving items to us'); // DO SOMETHING HERE } } // call the original method console.debug('call the original method'); dojo.dnd.Source.prototype.onDndDrop.call(this, source, nodes, copy); // of course you can call it before your own processing // or somewhere inside your code --- it depends on your logic } }); //Now parse the page for widgets dojo.parser.parse(); });It works.. Thanks!
Thanks eugene,
It is working now, i am new to dojo ( 0.9) so i just wondered way it does'nt work. But your updated example works like a charm!
Great support!
Finally, a way to get rid of the node copy
Is there any chance to disable this functionallity via parameters in the near future (next major version) so the dnd may be rendered like this?
</div>
That would be a nice improvement
Please file an enhancement
Please file an enhancement ticket in the trac (use guest/guest).