JUICE UI

Supercharge ASP.NET
Web Forms with jQuery UI

sortable

Interaction — Makes selected elements sortable by dragging with the mouse.

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.

Examples

Default functionality

<style>
	#_Default { list-style-type: none; margin: 0; padding: 0; width: 40%; }
	#_Default li { margin: 0 6px 6px 6px; padding: 0.4em; padding-left: 1.5em; font-size: 1em; height: 18px; }
	#_Default li span { position: absolute; margin-left: -1.3em; }
</style>

<ul id="_Default" runat="server" ClientIDMode="Static">
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
	<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<juice:sortable TargetControlID="_Default" runat="server"/>

<p><em>Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.</em></p>
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

Properties

Events

All events are currently of the type EventHandler. The "sender" parameter is a reference to the control, and should be cast appropriately to access the widget's properties and methods.