Learning Ajax framework-dojo: Section 5-a summary of the dojo drag event (with source code)

Source: Internet
Author: User

In practical applications, when the drag action starts or ends, it performs some acquired operations. In this case, you need to use the Event System of dojo to add event processing functions for the drag event. This article provides the basic classesDojo. dnd. DragSourceAndDojo. dnd. DropTargetWith the source code.

 

Part 1:

When adding a drag effect to an element, you need to create a class instance. Dojo implements three classes for different drag functions: dojo. dnd. HtmlDragSource, dojo. dnd. HtmlDragCopySource, and dojo. dnd. HtmlDragMoveSource.These three classes share a common base class, dojo. dnd. DragSource, which defines the following events.

  • OnSelected: Triggered when the drag element is selected. The processing function of the drag element event is selected.
  • OnDragStart: Triggered when the drag action starts. It is the processing function of the drag start event.
  • OnDragEnd: This function is triggered when the drag operation ends.

The method to register the event response function is to use the event binding mechanism (dojo. event. connect/kwConnect). The following uses a simple example to demonstrate how to add a drag-and-drop event processing function. The code on the sample page is as follows:

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = 'utf-8"/>
<Title>Dojo. dnd drag event ---- onDragStart, onDragEnd, onSelected</Title>
<Script type = "text/javascript">
VarDjConfig= {
IsDebug: True
};
</Script>
<Script type = "text/javascript" src = "dojo-0.3.1-ajax/dojo. js">
</Script>
<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>
<Script type = "text/javascript">
Dojo. require ("dojo. dnd.HtmlDragMove");
Dojo. require ("dojo. event .*");
Function init (){
// Create an instance of the dojo. HtmlDragSource class so that the div element can be dragged.
VarDrag= NewDojo. dnd. HtmlDragSource(Dojo. byId ("div "));

// Register the processing function for the drag-and-drop end event
Dojo. event. connect (Drag,"OnDragEnd", Function (evt ){
// Output debugging information
Dojo. debug("Drag end ");
});

// Register the processing function for the drag-and-drop start event
Dojo. event. connect (drag ,"OnDragStart", Function (evt ){
Dojo. debug ("drag start ");
})

// Register the processing function of the selected drag-and-drop element event
Dojo. event. connect (drag ,"OnSelected", Function (evt ){
// Alert ("drag selected ");
Dojo. debug ("drag selected ");
});
}
// Call init () during page loading ()
Dojo. event. connect (dojo, "loaded", "init ");

Function init11 (){
// Create an instance of the dojo. HtmlDragSource class so that the div element can be dragged.
Var drag11 = new dojo. dnd. HtmlDragSource (dojo. byId ("list1 "));

// Register the processing function for the drag-and-drop end event
Dojo. event. connect (drag11, "onDragEnd", function (evt ){
// Output debugging information
Dojo. debug ("drag11 end ");
});

// Register the processing function for the drag-and-drop start event
Dojo. event. connect (drag11, "onDragStart", function (evt ){
Dojo. debug ("drag11 start ");
})

// Register the processing function of the selected drag-and-drop element event
Dojo. event. connect (drag11, "onSelected", function (evt ){
// Alert ("drag selected ");
Dojo. debug ("drag11 selected ");
});
}
// Call init11 () during page loading ()
Dojo. event. connect (dojo, "loaded", "init11 ");
</Script>
</Head>
<Body>
<Div id = "div" style = "width: 200px; height: 200px; background: blue">
OnDragStart, onDragEnd, onSelected usage
</Div>
<Ul id = "list1">
<Li id = "drag11">
List 1, entry 1
</Li>
<Li id = "drag12">
List 1, entry 2
</Li>
<Li id = "drag13">
List 1, entry 3
</Li>
</Ul>
</Body>
</Html>

The page running result of the preceding example can be: Output debugging information below the dragged element div or list1, which reflects the trigger process of three events in this process.

 

 

If the overall drag-and-drop function is enabled, can each item in the list be dragged and the preceding three events be executed simultaneously? The answer is yes. You only need to modify the function. Function functions should be written in conjunction with the previousSection 4You can drag the code to modify it. Code modified:

Function init11 (){
// 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 ++ ){
// Create an instance of the dojo. HtmlDragSource class so that the div element can be dragged.
Var drag11 = new dojo. dnd. HtmlDragSource (lis [x], "li1", false );
}
// Register the processing function for the drag-and-drop end event
Dojo. event. connect (drag11, "onDragEnd", function (evt ){
// Output debugging information
Dojo. debug ("drag11 end ");
});

// Register the processing function for the drag-and-drop start event
Dojo. event. connect (drag11, "onDragStart", function (evt ){
Dojo. debug ("drag11 start ");
})

// Register the processing function of the selected drag-and-drop element event
Dojo. event. connect (drag11, "onSelected", function (evt ){

Dojo. debug ("drag11 selected ");
});
}

The page running result of the preceding example can be: Output debugging information below the dragged element list1 or list2, which reflects the trigger process of three events in this process.

 

 

Part 2:

In the process of dragging elements, we need to focus not only on the elements to be dragged, but also on the containers that accept the drag elements. The class associated with accepting drag-and-drop element containers is dojo. dnd. HtmlDropTarget, and its base class is dojo. dnd. DropTarget.The following events are defined in the dojo. dnd. DropTarget class:

  • OnDragOver: Triggered when an element is dragged to the top of the container.
  • OnDragOut: Triggered when an element is dragged out of the container region.
  • OnDragMove: Elements are triggered when they are dragged inside the container.
  • OnDropStart/onDrop/onDropEnd: Triggered when an element is dragged inside the container.

The following example shows how to process events that accept the drag and drop element container. The related code is as follows:

<Script type = "text/javascript">
Dojo. require ("dojo. dnd. HtmlDragCopy ");
Dojo. require ("dojo. event .*");

Function init11 (){
// Enable list1 to accept the dragged element. The type of the dragged element is "li1"
Var list1 = document. getElementById ("list1 ");
Var drop1 = 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 ++ ){
// Create an instance of the dojo. HtmlDragSource class so that the div element can be dragged.
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 ");
Var drop2 = 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 );
}
// Register the onDragOver event processing function of drop1
Dojo. event. connect (drop1 ,"OnDragOver", Function (evt ){
// Output debugging information
Dojo. debug ("drop1 onDragOver ");
});

// Register the onDragOut event processing function of drop1
Dojo. event. connect (drop1 ,"OnDragOut", Function (evt ){
Dojo. debug ("drop1 onDragOut ");
})

// Registers the onDragMove event processing function of drop1.
Dojo. event. connect (drop1 ,"OnDragMove", Function (evt ){
Dojo. debug ("drop1 onDragMove ");
});

// Register the onDropStart event processing function of drop1
Dojo. event. connect (drop1 ,"OnDropStart", Function (evt ){
Dojo. debug ("drop1 onDropStart ");
});
// Register the onDrop event processing function of drop1
Dojo. event. connect (drop1 ,"OnDrop", Function (evt ){
Dojo. debug ("drop1 onDrop ");
});
// Register the onDropEnd event processing function of drop1
Dojo. event. connect (drop1 ,"OnDropEnd", Function (evt ){
Dojo. debug ("drop1 onDropEnd ");
});

// Register the onDragOver event processing function of drop2
Dojo. event. connect (drop2, "onDragOver", function (evt ){
// Output debugging information
Dojo. debug ("drop2 onDragOver ");
});

// Register the onDragOut event processing function of drop2
Dojo. event. connect (drop2, "onDragOut", function (evt ){
Dojo. debug ("drop2 onDragOut ");
})

// Registers the onDragMove event processing function of drop2.
Dojo. event. connect (drop2, "onDragMove", function (evt ){
Dojo. debug ("drop2 onDragMove ");
});

// Register the onDropStart event processing function of drop2
Dojo. event. connect (drop2, "onDropStart", function (evt ){
Dojo. debug ("drop2 onDropStart ");
});
// Register the onDrop event processing function of drop2
Dojo. event. connect (drop2, "onDrop", function (evt ){
Dojo. debug ("drop2 onDrop ");
});
// Register the onDropEnd event processing function of drop2
Dojo. event. connect (drop2, "onDropEnd", function (evt ){
Dojo. debug ("drop2 onDropEnd ");
});
}

<Ul id = "list1">
<Li id = "drag11">
List 1, entry 1
</Li>
<Li id = "drag12">
List 1, entry 2
</Li>
<Li id = "drag13">
List 1, entry 3
</Li>
</Ul>

<Hr/>
<Ul id = "list2">
<Li id = "drag21">
List 2, entry 1
</Li>
<Li id = "drag22">
List 2, entry 2
</Li>
<Li id = "drag23">
List 2, entry 3
</Li>
</Ul>

The page running result of the preceding example can be: a list item is dragged from list1 to list2, and debugging information is output below, this information reflects the event triggered in this process.

The process is as follows:

DEBUG: drop1 onDragOver

DEBUG: drop1 onDragMove

DEBUG: drop1 onDragOut

DEBUG: drop2 onDragMove

DEBUG: drop2 onDragMove

DEBUG: drop2 onDragMove

DEBUG: drop2 onDragMove

DEBUG: drop2 onDropStart

DEBUG: drop2 onDragOut

DEBUG: drop2 onDrop

DEBUG: drop2 onDropEnd

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.