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.
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.
