As your Web application being developed toward a richer and sophisticated user experience, the application of drag and drop may grow significantly and become more advanced and complex. It is very important that you carefully designed drag-drop features to avoid data input error and to allow extensibility in the future.

One of the essential tasks that you should consider to implement during the design is the drag-drop validation. Often times you would like to restrict the drop controls to allow receiving drag controls based on its drag data type. For instance, a Treeview control may expect a drag control containing "GridItems" data. In this scenario, the Treeview control shouldn't receive other kind of data to avoid erroneous data processing.

There are two kinds of built-in drag-drop validation introduced in WebDragDropExtender 1.0:

Accept Data Type
You can specify a drop control to accept certain drag controls which DragData type is equal to a specific data type, by specifying the target data type in the AcceptDataType property.
Accept Drag Controls
You can specify a drop control to accept certain drag controls which ID is included in the AcceptDragControls property of the drop control. You can specify multiple control IDs by separating each control ID with semicolon character.

With both techniques above, you can create basic validation for your drag-drop implementation scenarios. When the drag context does not meet the condition set by either data type or drag controls ID, the drag's cursor effect will be set to NotAllowed automatically to give real-time feedbacks to end users. However, the OnDragDrop client side event will still be called regardless of the current Effect. It is best practice to check the current Effect in the OnDragDrop event before you determine further actions. To learn more, please refer to Walkthrough: Ensuring validity of drag objects based on Effect during DragDrop event.

Accept Drag Controls Sample (ASPX)

Component's Tags

Copy Code

<ISWebDesktop:WebDragDropExtender ID="WebDragDropExtender1" runat="server">          
   <DragSettings DefaultEffect="Move" />          
   <DragControls>              
      <ISWebDesktop:WebDragControl ControlID="Image1" />              
      <ISWebDesktop:WebDragControl ControlID="Image2" />              
      <ISWebDesktop:WebDragControl ControlID="Image3" />          
   </DragControls>          
   <DropControls>              
      <ISWebDesktop:WebDropControl AcceptDragSourceControls="Image1; Image2" ControlID="Panel1" />          
   </DropControls> 
</ISWebDesktop:WebDragDropExtender>

Intersoft WebDesktop Documentation
Drag Data Validation
See Also Send Feedback

Accept Drag Controls Sample (ASPX)

See Also