DragPanel

Descripción

El DragPanel sería el ejemplo perfecto de cómo conseguir una funcionalidad avanzada, que en javascript requeriría decenas de líneas de programación, con apenas dos líneas de código y una mayor flexibilidad.

Se aplica a cualquier control Web (el más habitual es el Panel) y le añade la funcionalidad de poder arrastrarlo a cualquier parte de la pantalla. Vamos a distinguir entre el controlador y el contenido, donde el controlador es sobre lo que deberemos hacer clic y arrastrar para mover el contenido.

Propiedades

• TargetControlID: el ID del control correspondiente al contenido.
• DragHandleID: el ID del control correspondiente al controlador.

Ejemplo

<asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px">
<asp:Panel ID="Panel1" runat="server" Width="125px" BackColor="Yellow"
Font-Bold="true" BorderColor="black" BorderWidth="1">
Arrástrame
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="250px" Width="125px" BorderColor="black" BorderWidth="1">
Este es el contenido que vamos a poder arrastrar por toda la pantalla.
</asp:Panel>
</asp:Panel>

<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"
DragHandleID="Panel1" TargetControlID="Panel3">
</ajaxToolkit:DragPanelExtender>


<script type="text/javascript">
// Pequeño script para una correcta compatibilidad con todos los navegadores.
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
}
setBodyHeightToContentHeight();
$addHandler(window, "resize", setBodyHeightToContentHeight);
</script>