Atlas Drag & Drop Overview
Dflying | 13 March, 2006 04:53The Atlas framework provides amazing cross-browser support for drag & drop operations. Basically, to create a UI with drag & drop is really simple and we just need:
- Draggable items and Drop targets. 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 Atlas framework allows to define draggable elements by implementing the IDragSource interface. A drop target is, instead, a class that implements the IDropTarget interface. It is also possible to create a class that implements both the IDragSource and the IDropTarget interfaces: we'll have a control that acts both as a draggable item and a drop target (an example of such control is a "floating" control).
- A DragDropManager, which is an object with global scope that is instantiated at runtime. This object can be accessed through the reference Web.UI.DragDropManager and is generally used to start dragging operations and to register drop targets. From there on, the DragDropManager handles all the drag & drop operations through calls to IDragSource and IDropTarget methods.
So, the steps we needed to create a drag & drop UI could be
- Create draggable items by implementing the IDragSource interface. The class that implements this interface is also responsible to call 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 to group draggable items (the predefined dataType is HTML);
- Create drop targets by implementing the IDropTarget interface. A class that implements this interface is responsible to register the drop target by invoking the Web.UI.DragDropManager.registerDropTarget() method. Each drop target has a list of acceptedDataTypes, that specifies which "types" of draggable items can be dropped on that targets.
In summary, a drag & drop operation is tipically started by an IDragSource object with the call to the startDragDrop() method of the DragDropManager. Then, the operation is handled by the DragDropManager, through calls to the IDragSource methods of the item being dragged, and IDropTarget methods of the registered drop target(s).
Built-in Classes for Drag & Drop
Before getting into the drag & drop engine details (later posts, maybe), it's better to look at some built-in controls and behaviors provided by the Atlas framework to perform drag & drop operations. Obviously, all these classes implement the IDragSource, IDropTarget interface, or both. Note these controls are all in client side.
- The DragDropList behavior allows to add drag & drop capabilities to list of controls. One typical use is to add this behavior to a ListView control.
- The DraggableListItem behavior allows to define a draggable item in a DragDropList. Usually it is added as an ItemTemplate's behavior inside a ListView, to make list items draggable.
- The DataSourceDropTarget behavior is used to add dropped data to a DataSource control.
- The FloatingBehavior can be added to a control to obtain a floating control.
DEMO
In the example, we'll build a simple page with draggable content (Take a look to Start or Windows Live page for more complex examples of this kind of layout and functionality. If you are familiar with ASP.NET Web Parts, that is almost the same.) by using the DragDropList and DraggableListItem behaviors. Another example using the DragDropList and other drag & drop examples can be found in Wilco's website. You can found the full code for this example at the end of this post. First of all, let's create the page with static layout (think of it as a "screenshot" of the final dynamic layout). Then, we'll add dynamic behaviors to controls with some Atlas markup. I've created two zones that are supposed to act as drop zones for draggable content. The draggable content is represented by panels with ASP.NET controls inside them.
<!-- Left Area --> <div id="leftArea" class="list1"> <div id="content1" class="item"> <div id="content1Title" class="itemTitle">Content 1</div> <div class="itemContent"> <asp:login id="myLogin" runat="server"></asp:login> </div> </div> <div id="content2" class="item"> <div id="content2Title" class="itemTitle">Content 2</div> <div class="itemContent"> Dflying's Item </div> </div> </div> <!-- Right Area --> <div id="rightArea" class="list2"> <div id="content3" class="item"> <div id="content3Title" class="itemTitle"> Content 3</div> <div class="itemContent"> <asp:calendar id="myCalendar" runat="server" cssclass="centered"></asp:calendar> </div> </div> </div>
I've created two drop zones and three content panels inside them, obtaining the static layout for the page. Now, we need some HTML to represent the "highlighted" content area when a panel is dragged over (the dropCueTemplate), and some HTML to display when all the panels have been moved away from a drop zone (the emptyTemplate).
<!-- Hide template elements --> <div class="templates"> <!-- DropCue Template --> <div id="dropCueTemplate" class="dropCue"> </div> <!-- Empty Template --> <div id="emptyTemplate" class="emptyList"> Drop content here.</div> </div>
Ok, we are ready to make this a dynamic page by adding Atlas markup. The two drop zones will become two Atlas controls with DragDropList behavior. The code for the left drop area is
<!-- Left Area --> <control id="leftArea"> <behaviors> <dragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical"> <dropCueTemplate> <template layoutElement="dropCueTemplate" /> </dropCueTemplate> <emptyTemplate> <template layoutElement="emptyTemplate" /> </emptyTemplate> </dragDropList> </behaviors> </control> <!-- Right Area --> <control id="rightArea"> <behaviors> <dragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical"> <dropCueTemplate> <template layoutElement="dropCueTemplate" /> </dropCueTemplate> <emptyTemplate> <template layoutElement="emptyTemplate" /> </emptyTemplate> </dragDropList> </behaviors> </control>
while the code for the right area is similar. In the above code, we have wrapped the "leftArea" <div> element in an Atlas control, and added a DragDropList behavior to it. This DragDropList holds data of type "HTML", accepts data of type "HTML", has a Vertical orientation (the directon can be Horizontal or Vertical) and the drag operation is done by moving the whole item (the other option is dragMode="Copy", that drags a copy of the item). Inside the <dragDropList> element we have specified, by providing their IDs, which DOM elements to use as the dropCueTemplate and the emptyTemplate. Let's see the markup for one of the content panels (the code for the other panels is similar):
<!-- Draggable items --> <control id="content1"> <behaviors> <draggableListItem handle="content1Title" dataType="HTML" /> </behaviors> </control>
Again, the DOM element "content1" becomes an Atlas control with a draggableListItem behavior. This behavior allows the content panel to be dragged. The handle attribute contains the ID of an element that acts as the "grip" for the drag operation. I've set the handle to be the header of each content panel. Finally, our draggableListItem holds data of type "HTML". This means that we can drop this item on drop targets that accept data of type "HTML". A similar declaration is repeated for each content panel defined as static HTML in the page.
Here's the full source code: Atlas Drag and Drop Demo
Posted in
Atlas.
Comment: (1).
Trackbacks:(195).
Permalink
«Next post |
Previous post»
Referers
Comments
-
1. Malini | 11/22,2007 at 00:19
Hi Dflying ,
I red your drag and drop exaples(Shopping cart) . But Drag and drop is limited to webpage . How to implement drag file from desktop and drop in to fileupload control, where text area get the dragged file path .Is there any solution?Malini