The beauty of drag and drop.

A while ago, I have posted about Cross IFRAMEs ability in our upcoming WebDragDropExtender component. As the development of this new component has finished, I decided to blog more about this new component to give you more understanding and impression about the features available in WebDragDropExtender.

In this post, I would like to share how this new component could be used together with other Intersoft’s components such as WebGrid and WebDesktop. During the final phase of the samples creation, our team has just realized how drag and drop could change the way user interacts with application. It’s just beautiful.

WebDragDropExtender is designed with high extensibility and customizability as its key objectives. For instance, it includes special integration with WebGrid and WebDesktop and extend drag-drop behaviors in a new way that never possible before. We can easily, let’s say, to mark a WebGrid component as dragable element with multiple-selection behavior. Next, we can define WebDesktopManager as the drop target element with drop behavior for its shortcut icons.

This enables end users to drag one or more items from WebGrid component (inside WebDesktopWindow), to shortcut icon of WebDesktopManager. To get a big picture of the results, let’s look at the following screenshot.

dragdrop_2.png

The above good-looking screenshot might lead you a question, how complex the implementation could be? As the first vendor who embrace this new innovation, certainly there were a lot of challenges. However, we tried our best to make drag-drop as easy-to-use as possible through solid object-based encapsulation, deep integration with Visual Studio and designers.

For example, take a look at the following code snippets and you will agree that the implementation is pretty straightforward, and most behaviors can be added easily via declaratively or programmatically:

<ISWebDesktop:WebDragDropExtender ID=”WebDragDropExtender1″ runat=”server”>
     <DragControls>
           <ISWebDesktop:WebDragControl AdvancedProperties=”Type=WebGrid,ShadowWidthMode
=FixedWidth,ShadowWidthValue=200″
ControlID=”gridEmployees” />
   
</DragControls>
    <DropControls>
   
<ISWebDesktop:WebDropControl ControlID=”dm1″ AdvancedProperties=”Type=WebDesktopManager,DropableOnShortcut=True,
DetectOverlappingObject=True,ActivateWindowOnTaskBarOver=True”
/>
    </DropControls>
    
<ClientSideEvents OnDragOver=”DragOver” OnDragDrop=”DragDrop” />
</ISWebDesktop:WebDragDropExtender>

There are many other interesting features such as AJAX dragdrop server side event, Vista-style tooltip and visual indicator, complete client side events, drag-drop data validation, built-in cursor effects and more. More posts will follow. WebDragDropExtender will be part of WebDesktop 2.5, which will be released along with other new products in our 2007 R2 release.

As the next R2 release speaks, we are planning to deliver the first beta version on mid of June. The final release is expected to be available sometime in July (as of our original 2007 R2 schedule).

If you have questions or feedbacks around WebDragDropExtender, feel free to post your comments.

All the best,

Jimmy.

Leave a Reply