<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>