Our last example looked pretty average. After playing with it for some time you may realize that visual indicators for DnD actions could be a great addition. Wouldn't it be nice if you could customize look of nodes so as to indicate important conditions or events in drag and drop functionality?
This is made very easy in Dojo. You don't have to intercept events and add your own code to modify the look of the nodes. Nodes that take part in DnD make use of certain predefined CSS classes. All you need is to supply a declaration to customize look and feel. We will making some changes to the last example to make it beautiful.
First, we will be using these two images in place of those ugly rectangles (BLUE.png and RED.png). [inline:BLUE.png=test] [inline:RED.png=test]
Then, we change our markup a bit. We will use <img> tags instead of <div>. Finally, we add the magic <style> section. Many classes have been defined in this section. You may want to play around with them a bit. A list of such class can be found in 'dndDefault.css' file located in dojotoolkit/dojo/tests/dnd directory. Given below is the complete source :
<html>
<head>
<title>Beautification</title>
<style type="text/css">
.target {border: 1px dotted gray; width: 300px; height: 300px;padding: 5px;
-moz-border-radius:8pt 8pt;radius:8pt;}
.source {border: 1px dotted skyblue;height: 200px; width: 300px;
-moz-border-radius:8pt 8pt;radius:8pt;}
.dojoDndItemOver {background: #feb;border: 1px dotted gray; }
.dojoDndItemBefore {border-left: 2px dotted gray; }
.dojoDndItemAfter {border-right: 2px dotted gray; }
.target .dojoDndItemAnchor {border:1px solid gray;}
.dojoDndAvatar {font-size: 75%; color: black;}
.dojoDndAvatar td {padding-left: 20px; padding-right: 4px;height:20px}
.dojoDndAvatarHeader {background: #ccc; background-repeat: no-repeat;}
.dojoDndAvatarItem {background: #eee;}
.dojoDndMove .dojoDndAvatarHeader {background-image: url(images/dndNoMove.png);}
.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader {background-image:
url(images/dndMove.png);}
</style>
<script type="text/javascript" src="../../dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.dnd.source"); // capital-S Source in 1.0
dojo.require("dojo.parser");
</script>
</head>
<body style="font-size: 12px;">
<h1>A Beautification Example</h1>
<table><tbody><tr>
<td>
SOURCE
<div dojoType="dojo.dnd.Source" jsId="c1" class="source">
<img src="BLUE.png" class="dojoDndItem" dndType="blue"/>
<img src="RED.png" class="dojoDndItem" dndType="red"/>
<img src="BLUE.png" class="dojoDndItem" dndType="blue"/>
<img src="RED.png" class="dojoDndItem" dndType="red"/>
<img src="BLUE.png" class="dojoDndItem" dndType="blue"/>
<img src="RED.png" class="dojoDndItem" dndType="red"/>
<img src="BLUE.png" class="dojoDndItem" dndType="blue"/>
<img src="RED.png" class="dojoDndItem" dndType="red"/>
<img src="BLUE.png" class="dojoDndItem" dndType="blue"/>
</div>
</td>
<td>
TARGET
<div dojoType="dojo.dnd.Target" jsId="c2" class="target" accept="red,blue">
</div>
</td>
</tr><tbody/></table>
</body>
</html>
Note that we haven't added any code yet. But now if you run this example you will agree that it certainly looks more beautiful. Some points worth noticing are: