Intersoft Support Center

Use Image Previewer

WebDragDropExtender enables you to easily add drag behavior to multiple controls using an elegant object model.

This topic will show you how to use Image Previewer.

To use Image Previewer

  1. Drag ASP.NET Image and Panel controls to the WebForm. Named the ID as Image1 and Panel1 respectively.
  2. In Image Properties, set ImageUrl to any thumbnail image you want to display. For example: ../Images/WDMBlockingInteractionT.png.
  3. Right-click on WebDragDropExpander control and choose Properties.
  4. Go to DragControls and click the collection button.
  5. Add a drag control. Set ControlID to Image1 and DragData to any standard image you want to display. For example: WDMBlockingInteractionF. In this case, we are using same image but different size in order to show image previewer.
  6. Go to DropControls and click the collection button.
  7. Set ControlID to Panel1.
  8. Add html image control inside Panel1 like following:

    <asp:Panel ID="panelDrop" runat="server" Width="525px" Height="398px" BackColor="Beige">  
       <img id="imagePreview" style="display: none" />

  9. Create DragDrop() in OnDragDrop client-side events to preview image.
    JavaScript Copy Code
    function DragDrop(controlId, dragEventArgs, dropObject)
       var img = document.getElementById("imagePreview");
       img.src = "../images/" + dragEventArgs.Data + ".png"; = "";

  10. Run the project. Simply drag image from the left panel into the right panel, and you will preview the image in larger size.
Previous Next