jquery-ui/demos/functional/templates/ui.sortable.ex1.html

<div class="sortable-container">
	
	<div id="example1">
	
		<button onclick="$('#selectedUsers').sortable('enable')" type="button">Enable</button>
		<button onclick="$('#selectedUsers').sortable('disable')" type="button">Disable</button>
		<button onclick="alert($('#selectedUsers').sortable('serialize'))" type="button">Serialize!</button>
		<button onclick="alert($('#selectedUsers').sortable('toArray'))" type="button">ID's to Array!</button>
		
		<br><br>
		
		<div id="sortable-ex" style="min-height: 110px; min-height:110px; height: auto !important;">
		
			<div style="float: left;">
				Selected users
				<ul id="selectedUsers" style="cursor: hand; cursor: pointer;">
					<li id='user_Susan'>Susan</li>
					<li id='user_Beth'>Beth</li>
					<li id='user_Bob'>Bob</li>
					<li id='user_Edward'>Edward</li>
					<li id='user_Kate'>Kate</li>
				</ul>
			</div>
			
			<div style="float: left; margin-left: 50px;">
				User list
				<ul id="userList" style="cursor: hand; cursor: pointer;">
					<li id='user_Jack'>Jack</li>
					<li id='user_John'>John</li>
					<li id='user_Marry'>Marry</li>
					<li id='user_Claire'>Claire</li>
					<li id='user_Daniel'>Daniel</li>
				</ul>
			</div>
		
			<br style="clear: both;">
		
		</div>
	</div>
</div>