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
- Drag ASP.NET Image and Panel controls to
the WebForm. Named the ID as Image1 and Panel1
respectively.
- In Image Properties, set ImageUrl to any thumbnail image you want
to display. For example: ../Images/WDMBlockingInteractionT.png.
- Right-click on WebDragDropExpander control and choose Properties.
- Go to DragControls and click the collection button.
- 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.
- Go to DropControls and click the collection button.
- Set ControlID to Panel1.
- 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" />
</asp:Panel>
- Create DragDrop() in OnDragDrop client-side events
to preview image.
function DragDrop(controlId, dragEventArgs, dropObject)
{
var img = document.getElementById("imagePreview");
img.src = "../images/" + dragEventArgs.Data + ".png";
img.style.display = "";
}
|
- Run the project. Simply drag image from the left panel into the right panel, and
you will preview the image in larger size.