A Simple Example

Let's make things interesting: a simple example of Dojo DnD in action ! In this example we will implement very basic DnD functionality in a web page. We will have a red and a blue rectangle that can be dragged and dropped onto a target.

First, we'll start with the standard header and some CSS:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<html>

<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="../../dojo.js" djConfig="parseOnLoad: true"></script>

<script type="text/javascript"> 

        dojo.require("dojo.dnd.source"); // dojo.dnd.Source in 1.0

        dojo.require("dojo.parser");    

</script>

</head>

This is an important part. In this example we have only definied four classes. The 'target' and the 'source' class will be used by Dojo. The other two classes are used to create the red and blue rectangle.

Note: in 0.9, to use the class dojo.dnd.Source, you must dojo.require the resource dojo.dnd.source. Note the capitalization here. In Dojo 1.0, both are capitalized.

Next, to hold the source and targets, we have a table with two cells. The first(left) cell hosts a source and the second(right) cell hosts a target:

<body style="font-size: 12px;">

<h1>A Simple Example</h1>

<table><tbody><tr>

<td>

<!-- Create a source with two nodes -->

<div dojoType="dojo.dnd.Source" 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>

The outermost <div> tag creates a source object. The inner <div> tags with class 'dojoDnDItem' create nodes, that can participate in DnD. The 'dndType' attribute can be used to specify 'type' of a node. You can specify more than one type for a node. Our nodes contains a red and blue rectangle with text on them. You can replace this content with whatever you like.

<td>

<!-- Create a target that accepts nodes of type red and blue. -->

<div dojoType="dojo.dnd.Target" jsId="c2" class="target" accept="blue,darkred">

        TARGET

</div>

</td>

</tr><tbody/></table>

The above markup creates a pure target that can accept nodes with type 'blue' and 'darkred'. The accept attribute is comma separated list of 'types' which can be dropped onto this node. This means that only those nodes whose 'dndType' is present in list can be dropped onto this . You can restrict DnD operations easily by specifying appropriate 'types' for nodes and targets. With no effort on your part Dojo creates a default 'avatar' for each element when it is being dragged

As you can see, with pure markup and no code at all we added awesome drag and drop functionality to our page. This was simple example of DnD, in next chapters we will dwell into more details of the API. We will see how to customize DnD behaviour, use events and restricting DnD operations.