WebDataTree™ has a large variety of client-side events, which provides the developer with flexibility to create interactive applications. Here is a list of available client events for Drag and Drop Behavior:
DragStart – occurs when the mouse enters in a possible drop surface.
DragEnd – fired every time a drag operation ends, whether it was canceled or a drop occurred. This event is always the last event fired.
DragCancel – fired when a drag operation is canceled. This can happen if the dragged element is released. while not over a target element, the escape key is pressed, or a developer calls the endDrag method.
DragEnter – fired when the mouse enters in a possible drop surface.
DragLeave – fired when the mouse leaves a possible drop surface.
DragMove – fired when the mouse is moved while holding the object that is being dragged.
NodeDropped – fired when the node is dropped over the target.
NodeDropping – fired when the mouse is released over a potential drop target.
During the lifespan of a single drag and drop operation, the DragStart event is fired just once. While moving the dragged node, the DragMove event is fired by every pixel moved. Every time we enter drop possible surface, DragEnter is fired, when we leave possible surface DragLeave is fired. When we drop node, three events are fired as it follows: NodeDropping, NodeDropped, DragEnd;. So we have multiple fired events DragMove, DragEnter and DragLeave and single fired events DragStart, NodeDropping NodeDropped, DragEnd.
For more information you can visit our sample browser and view the sample for Client-side events for WebDataTree.
The following example shows how to wire up to DragStart event:
In HTML:
<ig:WebDataTree ID="WebDataTree1" runat="server">
<ClientEvents DragStart="dragStart" />
<Nodes>
<ig:DataTreeNode Text="Node1">
</ig:DataTreeNode>
<ig:DataTreeNode Text="Node2">
</ig:DataTreeNode>
</Nodes>
</ig:WebDataTree>
In C#:
this.WebDataTree1.ClientEvents.DragStart = "dragStart";
In JavaScript:
Function dragStart(sender, args) {
alert("Drag Started");
}