Drag and Drop Programming in Microsoft ASP.NET AJAX - Inner workings of the client side drag
(Page 2 of 4 )
In this section, we'll explore the inner workings of the amazing cross-browser drag and drop client side support provided by MS AJAX. In general, when we build a UI supporting drag and drop there are the following points for us to consider:
Draggable items. Draggable items are DOM elements that can be moved around the page, while drop targets are elements that act as "containers" for draggable items. The MS AJAX framework allows us to define draggable elements by implementing the IDragSource interface.
Drop targets. A drop target is a class that implements the IDropTarget interface. Certainly, you can also create a class that implements both the IDragSource and the IDropTarget interfaces.
A DragDropManager. The DragDropManager is a global object instantiated at runtime, which is generally used to launch dragging operations and to register drop targets. As you may have figured out, the DragDropManager serves as the headquarters of the whole drag and drop operation by invoking the corresponding methods of the IDragSource and IDropTarget interfaces.
Thus, we can take the following steps to create a drag and drop UI:
Create draggable items by implementing the IDragSource interface. The class that implements this interface is also responsible for calling the Web.UI.DragDropManager.startDragDrop() method to start the dragging operation (typically, this is done in an event handler for the mousedown event of the control's element). Each draggable item has its own dataType, which is an identifier that allows the grouping of draggable items (the predefined dataType is HTML);
Create drop targets by implementing the IDropTarget interface. A class that implements this interface is responsible for registering the drop target by invoking the Web.UI.DragDropManager.registerDropTarget() method. Each drop target has a list of acceptedDataTypes which specifies which "types" of draggable items can be dropped on that target.
Build a sample: an online shopping cart
In this sample, we'll simulate the shopping cart component of an online pet store. The customers can choose and drag their selected commodities (which refer to pets here) onto the shopping cart, and when they finally decide to buy them, they can conveniently click the related 'Order' button near the shopping cart to preview all the item-related info in the shopping cart before going to the check counter.
Next: Create an ASP.NET AJAX CTP-Enabled Web Site >>
More ASP.NET Articles
More By Xianzhong Zhu
