Wednesday, March 21, 2012

Use a DragPanelExtender and an AlwaysVisibleControlExtender component at the same time pro

<asp:Panel ID="Panel3" runat="server" Height="3333px" Width="3333px">
<asp:Panel ID="Panel1" runat="server" Height="150px" Width="125px" BackColor="black">
<asp:Panel ID="Panel2" runat="server" Height="25px" Width="125px" BackColor="Blue">
</asp:Panel>
</asp:Panel>
</asp:Panel>
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1" DragHandleID="Panel2">
</cc1:DragPanelExtender>
<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" TargetControlID="Panel1">
</cc1:AlwaysVisibleControlExtender>

I use a DragPanelExtender and an AlwaysVisibleControlExtendercomponent at the same time.
It works perfectly if I don't scroll the web page.
After I scroll the web page, the drag and drop behavior notworks properly. When I drag the Panel2, the Panel1 will disappear until I dropthe Panel2, the Panel1 will appear again.
Does anyone know how to solve this problem?

Does anyone know how to solve the problem?


Hi Vincent901529,

I have tested your sample and I think this issue is cuased by the scroll offset. I suggest that you should post it to CodePlex. If you insist on resolve it by yourself. We suggest that you should move the Panel to its right place on its mousedown event. You can modify on the mouseDownHandler (Line : 140 V11119) in the FloatingBehavior.js under the DragPanel directory.

 function mouseDownHandler(ev) { window._event = ev; var el = this.get_element(); if (this.checkCanDrag(ev.target)) { //new added logic.
 .... ; // calculate the new location.
$common.setLocation(el, newLocation); // reset the showing position.
 _dragStartLocation = $common.getLocation(el); ev.preventDefault(); this.startDragDrop(el); } }
  Best regards,
Jonathan

Many thanks for your replying.

It is very helpful.

No comments:

Post a Comment