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

40 lines
1.2 KiB
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>