Login Register

A Simple Example

Submitted by msmith on Tue, 06/05/2007 - 18:49.

This text is obsolete in parts. Please refer to the official DnD documentation.

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:

<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 0.9
        dojo.require("dojo.parser");   
</script>
</head>

This is an important part. In this example we have only defined 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 a comma separated list of 'types' which can be dropped onto this node. This means that only those nodes whose 'dndType' is present in the list can be dropped onto this target. 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 a simple example of DnD, in the next chapters we will dive into more details of the API. We will see how to customize DnD behaviour, use events and restricting DnD operations.

‹ TerminologyupBeautification ›

How do I get rid of the '1'

Submitted by wobbasun on Tue, 06/03/2008 - 02:18.

Hi, when i try this example, there's a number 1 that accompanies the dragged object. How do I remove/change this?

RE: How do I get rid of the '1'

Submitted by steve on Mon, 06/09/2008 - 22:14.

Try overriding the CSS for the element that displays the number:

.dojoDndAvatarHeader {
        display: none;
}

That worked for me. The item you're trying to remove is the AvatarHeader.

Paste that after your CSS include line and it should make it magically disappear!

Draging Items in Lists; Cannot drag between select lists

Submitted by meverett on Sat, 11/08/2008 - 02:04.

Following is an HTML example. It contains two parts:
-- An example of dragging between two dictionary lists which DOES work
-- An example of dragging between two HTML SELECT lists which DOES NOT work.
Interestingly enough, in the second example, I can drag items around to reorder them in the first list, but they do not seem to be dragable to the partner list.

Can anyone tell me how to make the second example work? I have searched and searched and cannot find an example of dragging options between two SELECT lists.

<head>

        <script djconfig="parseOnLoad: true" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js"
                type="text/javascript"></script>

        <script type="text/javascript">

   dojo.require("dojo.dnd.Source"); // dojo.dnd.source in 0.9
        </script>
        <style type="text/css">
       
        </style>
</head>
<body>
        <h2>
                Drag and Drop Definition Lists</h2>
       
                Arrange in order of your own preference.
        <dl id="listToRearrange" accept="fruit" dojotype="dojo.dnd.Source"
        style="border: solid 1px blue; width: 150px;
                padding: 5px;">
                <dt class="dojoDndItem" dndtype="fruit">Apple</dt>
                <dt class="dojoDndItem" dndtype="fruit">Peach</dt>
                <dt class="dojoDndItem" dndtype="fruit">Orange</dt>
        </dl>
        <dl id="targetList" dojotype="dojo.dnd.Source" accept="fruit"
                style="border: solid 1px red;padding:5px;width: 150px;">
                <dt>Drag to me</dt>
        </dl>
        <hr />
        <h2>Drag and Drop Drop Down Lists</h2>
        <select id="authList" accept ="author" dojotype="dojo.dnd.Source"
                style="border: solid 1px blue;" size ="10"
        >
                <option class="dojoDndItem" dndtype="author">Jance, J.A.</option>
                <option class="dojoDndItem" dndtype="author">Crichton, Michael</option>
                <option class="dojoDndItem" dndtype="author">McGarrity, Michael</option>
                <option class="dojoDndItem" dndtype="author">Miller, John Ramsey</option>
        </select>
        <select id="chosenList" accept="author" dojotype="dojo.dnd.Source" size="10"
               style="border: solid 1px blue;">
                <option class="dojoDndItem" dndtype="author">Drag chosen items here</option>
        </select>
</body>