Saturday, March 24, 2012

A Variation of the Beta2 DragPanel Demo

To recreate the demo above, save this image in your project folder as 'cursormove'.

aspx

<div class="demoarea"> <div class="demoheading">Drag Adapter Demonstration</div> <div style="height: 300px; width: 250px; float: left; padding: 5px;"> <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel6" DragHandleID="Image1" > </ajaxToolkit:DragPanelExtender> <asp:Panel ID="Panel6" runat="server" Width="100%"> <asp:Panel ID="Panel8" BorderStyle="Solid" BackColor="whitesmoke" ForeColor="#0B3D73" BorderWidth="2px" BorderColor="#0B3D73" runat="server" Width="100%" Height="250px" Style="overflow: scroll;"> <div> <p>A drag adapter (lower-right) is an accessory that converts a panel to being draggable around the surface of your screen. Simply hover your cursor over the adapter, depress your left mouse button and drag the panel. </p><hr /><p>This panel will reset its position on a postback or page refresh.</p> <hr /> <p><%= GetContentFillerText()%></p> </div> </asp:Panel> <div style="cursor:move; position:relative; left:238px; bottom:20px; width:19px;"> <asp:Image ID="Image1" runat="server" ImageUrl="../cursormove.gif" Height="17px" Width="17px" BorderColor="#0B3D73" BorderWidth="1" AlternateText="Drag Me"/> </div> </asp:Panel> </div> <div style="clear: both;"></div> </div><!--end demoarea-->
bottom of aspx
<!--<ajaxToolkit:DragPanelExtender ID="DragPanelExtender2" runat="server" TargetControlID="Panel6" DragHandleID="Panel7" > </ajaxToolkit:DragPanelExtender>-->

No comments:

Post a Comment