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
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
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>
A key to make this work is the CSS class "dojoDNDItem". It is the name of the class dojo is looking for.
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
Give the sample a try. See what happens if you hold the <CTRL> key while dragging.
In the next article we define a target for our session descriptions.