27.12.2010

dojo and Notes: Article 10 - dojo.dnd.Source - Drag'n'Drop with three lines of JavaScript code

>>Author:  Bernd Hort
>>Ort:     Hamburg

URL: http://www.assono.de/blog/d6plinks/dojo-and-Notes-article-10-dojo.dnd.Source

Category: dojo, Web-Entwicklung, Entwicklung, Lotus Domino

While the last article in this little dojo series covered the dijit.Dialog, this one will deal with Drag & Drop. It is one of my favorite topics in dojo. Simply because it is so easy. As you will see we only need three lines of code to make our session descriptions sortable via Drag & Drop.

There are two concepts for Drag & Drop in dojo. The first one is for moving elements to any position on the web page. The second is for sorting elements which are in a container element.

For moving elements only the dojo package hast to be loaded and the element has to be marked as movable with a dojoType.

//Package for moving elements
dojo.require("dojo.dnd.movable");

1. <div dojoType="dojo.dnd.Moveable"> Some Content</div>

A child element can be defined as a handle so that the user has something to grab. Which is useful if the content is editable. Otherwise the complete element can be grabbed and the content could not be selected.

1. <div dojoType="dojo.dnd.Moveable" handle="dragHandle">
2. <div id="dragHandle"></div> <textarea>This text could be edited.
3. </textarea> </div>

Sorting elements in a container could be quite handy. A container can be any HTML element who has child elements. It is not limited to ordered / unordererd lists.

Besides the obligatory loading of the package only the parent HTML element needs to be defined as a container and the child elements has to be identified as a Drag & Drop item. There is one abstract dojo.dnd.Container definition and two concrete implementations: dojo.dnd.Source and dojo.dnd.Target.

//Package for sorting elements via Drag & Dropt
dojo.require("dojo.dnd.Source");

1. <div dojoType="dojo.dnd.Source">
2. <div class="dojoDndItem">Item X</div>
3. <div class="dojoDndItem">Item Y</div>
4. <div class="dojoDndItem">Item Z</div>
5. </div>

A key to make this work is the CSS class "dojoDNDItem". It is the name of the class dojo is looking for.
A picture named M2

To make the session description in our sample draggable we mark the sessions as Drag & Drop items and define the DIV around as a source. This DIV has the id "sessions".

//Preparing Drag & Drop
dojo.require("dojo.dnd.Source");

dojo.query(".session").addClass("dojoDndItem");
var dndSource = new dojo.dnd.Source("sessions");

As promised we only needed three lines of JavaScript code.

Give the sample a try. See what happens if you hold the <CTRL> key while dragging.

In the sample database belonging to this series of articles you can find the content of this article in the form "webSpeedAgendaing-Step 8 | SpeedAgendaing-8" and the JavaScript library "SpeedAgendaing-Step8.js".

In the next article we define a target for our session descriptions.