Mastering the Dojo Toolkit, Part 4: Drag-and-drop in Dojo

Two kinds of drag-and-drop methods supported by Dojo

Before you start trying to understand how to implement the Dojo drag-and-drop effect, you first have to be clear that dragging has two distinct performance effects.

The first performance effect is the icon dragged to where, it will be placed directly where, the drag effect is the icon is exactly the same drag-and-drop action, and each drag-and-drop motion trajectory fully fit, this effect is called "drag." The second performance is when the icon is dragged to a place, release the mouse, the icon will be based on the current position and other icons for the frame of reference for automatic adjustment of the position. This effect is called "drag and Drop."

The drag of Dojo

The principle is easier to understand and simpler to use compared to drag and drop. And more close to people's intuitive impression of the "drag" effect.

The simplest instance of dragging

For the support of dojo, the effect of dragging is only required to use the Dojo tag attributes provided by Dojo to mark the entity that you want to implement the drag effect. Simply put, if you want an entity to drag, just add the dojotype= "dojo.dnd.Moveable" attribute to the label of the entity. For example, to implement a drag on a table, you only need to declare in this table the label "<table& gt;" Add Dojotype= "dojo.dnd.Moveable" to this attribute. Even if you add Dojotype= "dojo.dnd.Moveable" to the "<tr>" or "<td>" tab, you can also implement the drag effect of the corresponding entity.

Listing 1

<script　type="text/javascript">
dojo.require("dojo.dnd.move");　//引入Dojo的拖动功能模块　
dojo.require("dojo.parser");　//引入解析Dojo标记的功能模块　
</script>

<table　dojoType="dojo.dnd.Moveable">
<tbody><tr><td>Haha,　I　am　a　good　guy.</td></tr></tbody>
</table>
<!--引入dojoType="dojo.dnd.Moveable"，让上面的表格可以拖动-->　

It is to be noted that static creation of a drag entity requires the introduction of Dojo.require ("Dojo.parser").

To dynamically implement a drag entity

In Listing 1, you can create a drag entity by adding the corresponding Dojo tag attribute to the label of some entities. The method of statically implementing a drag entity is simple and straightforward. But in more cases, it is often necessary to create a drag entity dynamically based on some actual data. In this case, the static implementation of a drag-and-drop entity is not enough to satisfy the immediate needs. The good news is that Dojo has a corresponding dynamic implementation method for all the static implementation methods.

Listing 2

<script　type="text/javascript"　src="dojo_path/dojo/dnd/move.js"></script>
　<script　type="text/javascript">
　dojo.require("dojo.dnd.move");
　var　m1;
　var　init　=　function(){
　m1　=　new　dojo.dnd.Moveable("bad",{});//申明　id　为　"bad"　的实体为可拖动实体　
　};
　dojo.addOnLoad(init);//　表示在页面加载完成以后，执行　init　函数　
　</script>

　<div　id="bad">
　You　can　cop　me　"Haha,　I　am　a　bad　guy."
　</div>

Note that the curly braces in dojo.dnd.Moveable ("bad", {}) are used to set some drag-related properties that drag the entity "bad", and that you can now temporarily empty, without setting any drag-related properties. In the later narration, some of the relevant important attributes will be introduced step-by-step.