- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
Drag and Drop Actions
Submitted by ashish on Tue, 06/05/2007 - 18:51.
For a DnD application to be really useful, you would require mechanism to add user defined actions for different DnD events. This could be anything from
updating a text box value to sending data back to server using AJAX. In this chapter we will see how to hook up actions to DnD events.
This can be achieved with the publish/subscribe mechanism.
The following messages can be subscribed to :
- /dnd/source/over
- /dnd/start
- /dnd/drop
- /dnd/cancel
dojo.subscribe("/dnd/drop", function(source,nodes,iscopy){ //code to perform some action }); dojo.subscribe("/dnd/start", function(source,nodes,iscopy){ //code to perform some action }); dojo.subscribe("/dnd/source/over", function(source){ //code to perform some action }); dojo.subscribe("/dnd/cancel", function(){ //code to perform some action });The parameters to the callback function are:
- source : Source of the nodes which are being dragged/dropped.
- nodes: Array of HTML node objects. To get corresponding DnDItem object use the following method:
var jsnode = source.getItem(nodes[0].id); var d = jsnode.data; var t = jsnode.type;
- iscopy: This parameter is a boolean , which is true for a copy operation and false for drag operation.
If you are interested in getting the target object, then you can use following method:
var t = dojo.dnd.manager().target;When we create a target or source via markup, we can specify a name for global level javascript variable for it, using the jsId attribute.
<div dojoType="dojo.dnd.Source" jsId="cart" class="target" accept="red,blue" id="target1"> </div>This automatically creates a global variable 'cart' of the type "dojo.dnd.Source".
DnD Events Example
Now let us have a look at simple example of DnD events. In this example, I have created a simple shopping cart. Each blue and red sphere inside the source(shelf) has some price associated with it. This is assigned using the 'dndData' item. You can select multiple spheres from the source(shelf) and drop them onto the target (shopping cart). You will see the updated total price of your cart items. If you drop certain items back to the shelf, the corresponding amount is deducted from the total. I have attached a text file with this article which contains complete source. You will require BLUE.png and RED.png images to run the example.
Below is a excerpt from the file followed by explanation :
<script type="text/javascript"> dojo.require("dojo.dnd.source"); // capital-S Source in Dojo 1.0 var item_price; var total = 0; function AddItems(target,nodes) { for (var i=0;i<nodes.length;i++) total += parseFloat((target.getItem(nodes[i].id)).data); dojo.byId("cost").innerHTML = total; } function SubstractItems(target,nodes) { for (var i=0;i<nodes.length;i++) total -= parseInt((target.getItem(nodes[i].id)).data); dojo.byId("cost").innerHTML = total; } function ShowPrice(target,nodes) { var sum =0; for (var i=0;i<nodes.length;i++) sum += parseInt((target.getItem(nodes[i].id)).data); dojo.byId("msg").innerHTML = "Selected Item Price is $"+ sum ; } function ClearMsg() { dojo.byId("msg").innerHTML = "";} function init() { dojo.subscribe("/dnd/drop", function(source,nodes,iscopy){ var t = dojo.dnd.manager().target; ClearMsg(); if(t == source) return; if(t == cart)AddItems(t,nodes); if(t == shelf)SubstractItems(t,nodes);}); dojo.subscribe("/dnd/start", function(source,nodes,iscopy){ var t = dojo.dnd.manager().target; ShowPrice(source,nodes);}); dojo.subscribe("/dnd/cancel", function(){ ClearMsg();}); } dojo.addOnLoad( init ); </script> <div dojoType="dojo.dnd.Source" jsId="shelf" class="source" id="source1" accept="red,blue" singular=false> <img src="BLUE.png" class="dojoDndItem" dndType="blue" dndData="10" title="$10"/> <img src="BLUE.png" class="dojoDndItem" dndType="blue" dndData="3" title="$3"/> ..... </div> <div dojoType="dojo.dnd.Source" jsId="cart" class="target" accept="red,blue" id="target1"></div> Total Price (USD): <span id="cost">0.00</span><br/> <b>Message: <span id="msg" style="color:blue"></span></b>
- A global level javascript variable 'total' is used to store the updated price.
- When the user starts dragging items, the 'ShowPrice' function gets called, which shows the total price of only the selected spheres.
- The callback function for "dnd\drop" message does the following :
- If the target and source are the same, exit and don't modify the total. This is because item has been dropped on same source from where it was dragged.
- If target is cart, then call 'AddItems()' to add the prices of dropped items to the total.
- If target is shelf, it means that items are being moved from cart to shelf, so call the 'SubstractItems()' function to deduct prices of those items from total.
This was a simple example of handling the DnD events to execute custom defined actions. So far we have covered basics, looked at using CSS for rich user interface and seen how to handle events. In next chapters we will learn about the 'node creator' function and build a very simple web based application to demonstrate use of DnD.
New Events in Dojo 1.0
Moveable implements three new events:
- onMove, which implements the move itself
- onMoving, which is called before onMove, so you have a chance to change something, for example, the new position of the move to implement some restrictions.
- onMoved, which is called after the move, so you can update other objects after the move.
Events have better locality than topics: instead of getting called on every move and check if it is "the right" move, you can connect directly to events on the Moveable. Nevertheless topics are still supported.
Attachment | Size |
---|---|
BLUE.png | 4.04 KB |
RED.png | 4.1 KB |
dndEvents.txt | 3.58 KB |
- Printer-friendly version
- Login or register to post comments
- Subscribe post
Please post
Hi, I'm trying to use dojo for a client application. I'd like to be able to drag menu items on to a page so the client can create their own forms. Knowing my available dnd actions would be really helpful. If someone could post them, I'd appreciate it.
Please read through the
Please read through the first two chapters. You may find some useful information there. I think you might be required to write a 'node creator' function for your functionality. This space will be soon updated.
Btw if you really need some info on writing node creator, try this:
On google search for 'dojo book 0.9 simple example' and read the cached version (of very first link) from google.
Actually the inital 'A simple Example' chapter had lot of information on node creator basics. But it had to be removed as the it became bit complex.
Error: dnd cancel subscription twice in example
The above example has two cancel subscriptions, the first should probably be a /dnd/source/over example.
Change:
alert(src);
ClearMsg();
});
To:
alert(src);
ClearMsg();
});
<style> images need updates
In the 'attached text file', the 'background-image' references to 'set2_stop.png' and 'set2_copy.png' in the 'complete source' should be updated to reference the 'dndNoMove.png' and 'dndMove.png' images, respectively. These images are available in the 0.9 'dojo/resources/images' directory.
mouse out event handler for dnd item
When i see one message subscription for /dnd/source/over . I expected some message for /dnd/source/out. But It was not mentioned. I need to display some icons on the dnd item on mouse over and need to hide the icons on mouse out. So there is no mouse out event handle specified here. Then I saw the Manager.js file there it was publishing on to /dnd/source/over in overSource and outSource function but the arguments are different. This is bit confusing and unexpected and was not documented here.
Source and accept
Why do the dojo.dnd.Source objects have an accept="" attribute on this page?
Working on Dojo 1.0?
Has anyone else been able to get this example to run with Dojo 1.0?
I'm getting all of the pretty balls, and the Source and Target boxes, but nothing is draggable...
Any ideas? I cut and pasted the code from the text file included in this example. I'm getting no errors in firebug (just some css warnings), but nothing is draggable.
Yes it works for me
The only thing I had to do was capitalize "Source" in "dojo.require("dojo.dnd.Source");"
dnd not working with this example
I capitalized it but it still didn't work for me.. any ideas
i am using the nightly build from 12-19-07
thx
got it
nm got it working thx!!
Some more examples for Drag and drop required
Hi
I am new to Dojo.
I want to develop an application in which there will be multiple blocks on the Html page. You can then drag these blocks anywhere on the page. But while doing this the other blocks on the page should reorder themselves accordingly. Please let me know if any sample code snippets are available for the same.
Looking forward to your help
Regards,
Heramb
There are some better details available
Check out: http://docs.google.com/View?docid=d764479_11fcs7s397