Learning Ajax framework-Dojo: section 4-Implementation of the drag-and-drop effect of dojo (with source code)

In the dojo. DND package, Dojo provides support for the drag and drop effects of page elements. The key classes used to achieve the drag effect are as follows.

<1> dojo. DND. htmldragsource

<2> dojo. DND. htmldragmovesource

<3> dojo. DND. htmldroptarget

<4> dojo. DND. htmldragcopysource

 

Next, let's take a look at the usage of these four classes.

First, define two divs and a list:

<Div id = "drag1" style = "width: 200px; Height: 200px; Background: bule">
Drag Module 1

</Div>
<Br/>
<Div id = "drag2" style = "width: 400px; Height: 400px; Background: yellow">
Drag module 2

</Div>

<Ul id = "list1">
<Li>
List 1, entry 1
</LI>
<Li>
List 1, entry 2
</LI>
<Li>
List 1, entry 3
</LI>
</Ul>
<Ul id = "list2">
<Li>
List 2, entry 1
</LI>
<Li>
List 2, entry 2
</LI>
<Li>
List 2, entry 3
</LI>
</Ul>

 

Define CSS:

<Style type = "text/CSS">
Ul {
Position: relative;
List-style: none;
Margin: 0;
Padding: 0;
Overflow: visible;
}

Li {
Margin: 3px 0;
Padding: 3px 3em 3px 10px;
Border: 2px solid #456;
Background-color: # CDE;
Cursor: move;
}
</Style>

 

Example 1: simple drag and drop

Function:Drag the label drag1. When the mouse is released, the label returns to its original position.

Key categories:Dojo. DND. htmldragsource: Drag and Drop page elements

MainCode:

<SCRIPT type = "text/JavaScript">
Dojo. Require ("dojo. DND .*");
Dojo. Require ("dojo. event .*");
Function Init (){
VaR drag_comeback = dojo. byid ("drag1 ");
NewDojo. DND. htmldragsource(Drag_comeback, "drag1 ");
}

Dojo. event. Connect (Dojo, "loaded", "init ");
</SCRIPT>

Example 2: drag and drop an object

Function:Drag the label drag2. When the mouse is released, the label remains at the position where the mouse is released.

Key categories:Dojo. DND. htmldragmovesource: freely drag and drop page elements

Main Code:

<SCRIPT type = "text/JavaScript">
Dojo. Require ("dojo. DND. htmldragmove ");
Dojo. Require ("dojo. DND .*");
Dojo. Require ("dojo. event .*");
Function Init (){
NewDojo. DND. htmldragmovesource(Dojo. byid ("drag2 "));
}

Dojo. event. Connect (Dojo, "loaded", "init ");
</SCRIPT>

 

Example 3: accept drag objects

Function:The page contains two List objects: list1 and list2. DND. for object instances of the htmldroptarget class, both list1 and list2 can accept the drag and drop elements to any list of list1 and list2.

Key categories:Dojo. DND. htmldroptarget: Make the page element the target object of the drag-and-drop element.

Main Code:

<SCRIPT type = "text/JavaScript">
Dojo. Require ("dojo. DND .*");
Dojo. Require ("dojo. event .*");
Function Init (){
// Enable list1 to accept the dragged element. The type of the dragged element is "Li1"
VaR list1 = Document. getelementbyid ("list1 ");
New Dojo. DND. htmldroptarget (List1, ["Li1"]);

// Enables each list item element in list1 to be dragged. Its type is "Li1"
VaR Lis = list1.getelementsbytagname ("Li ");
For (VAR x = 0; x <Lis. length; X ++ ){
New Dojo. DND. htmldragsource (LIS [X], "Li1 ");
}

// Enable list2 to accept the dragged element. The type of the dragged element is "Li1"
VaR list2 = Document. getelementbyid ("list2 ");
New dojo. DND. htmldroptarget (list2, ["Li1"]);

// Enables each list item element in list2 to be dragged. Its type is "Li1"
VaR Lis = list2.getelementsbytagname ("Li ");
For (VAR x = 0; x <Lis. length; X ++ ){
New dojo. DND. htmldragsource (LIS [X], "Li1 ");
}
}

Dojo. event. Connect (Dojo, "loaded", "init ");
</SCRIPT>

Example 4: Copy and drag

Function:Add a copy of The dragged element to the target object. For example, you can drag the list items in both lists. After the drag operation is completed, the list items to be dragged remain unchanged, at present, a copy of the items in the drag-and-drop list is added.

Key categories:Dojo. DND. htmldragcopysource: Copy and drag page elements

Main Code:

<SCRIPT type = "text/JavaScript">
Dojo. Require ("dojo. DND .*");
Dojo. Require ("dojo. DND. htmldragcopy ");
Dojo. Require ("dojo. event .*");
Function Init (){
// Enable list1 to accept the dragged element. The type of the dragged element is "Li1"
VaR list1 = Document. getelementbyid ("list1 ");
New Dojo. DND. htmldroptarget (List1, ["Li1"]);

// Enables each list item element in list1 to be dragged. Its type is "Li1". It also supports copying and dragging.
VaR Lis = list1.getelementsbytagname ("Li ");
For (VAR x = 0; x <Lis. length; X ++ ){
New Dojo. DND. htmldragcopysource (LIS [X], "Li1", false );
}

// Enable list2 to accept the dragged element. The type of the dragged element is "Li1"
VaR list2 = Document. getelementbyid ("list2 ");
New dojo. DND. htmldroptarget (list2, ["Li1"]);

// Enables each list item element in list2 to be dragged. Its type is "Li1". It also supports copying and dragging.
VaR Lis = list2.getelementsbytagname ("Li ");
For (VAR x = 0; x <Lis. length; X ++ ){
New dojo. DND. htmldragcopysource (LIS [X], "Li1", false );
}
}

Dojo. event. Connect (Dojo, "loaded", "init ");
</SCRIPT>