JUICE UI

Supercharge ASP.NET
Web Forms with jQuery UI

draggable

Interaction — Makes selected elements draggable by mouse.

The jQuery UI Draggable plugin makes selected elements draggable by mouse.

Draggable elements gets a class of ui-draggable

During drag the element also gets a class of ui-draggable-dragging

If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.

Examples

Default functionality

<asp:Panel runat="server" ID="_Default" CssClass="box">
	<p>Drag me around</p>
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="_Default" />

Drag me around

Delay Start

<style>
	.box.delayed { float: left; margin: 0 10px 10px 0; }
</style>

<asp:Panel runat="server" ID="_Delay1" CssClass="box delayed">
	<p>Only if you drag me by 20 pixels, the dragging will start</p>
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="_Delay1" Distance="20" />

<asp:Panel runat="server" ID="_Delay2" CssClass="box delayed">
	<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="_Delay2" Delay="1000" />

Only if you drag me by 20 pixels, the dragging will start

Regardless of the distance, you have to drag and wait for 1000ms before dragging starts

Revert Position

<style>
	.box.revert { float: left; margin: 0 10px 10px 0; }
</style>

<asp:Panel runat="server" ID="_Revert1" CssClass="box revert">
	<p>Revert the Original</p>
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="_Revert1" Revert="true" />

<asp:Panel runat="server" ID="_Revert2" CssClass="box revert">
	<p>Revert the Helper</p>
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="_Revert2" Revert="true" Helper="clone" />

Revert the Original

Revert the Helper

Drag Handle

<style>
	.box.handles { float: left; margin: 0 10px 10px 0; }
	.box .ui-widget-header { cursor: move; }
</style>

<asp:Panel runat="server" ID="_Handles1" CssClass="box handles">
	<p class="ui-widget-header">I can be dragged only by this handle</p>
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="_Handles1" Handle="p" />

<asp:Panel runat="server" ID="_Handles2" CssClass="box handles">
	<p>You can drag me around&hellip;</p>
	<p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
</asp:Panel>
<Juice:Draggable runat="server" TargetControlID="_Handles2" Cancel="p.ui-widget-header" />

I can be dragged only by this handle

You can drag me around…

…but you can't drag me by this handle.

Properties