mirror of
https://github.com/jquery/jquery-ui.git
synced 2026-01-30 03:08:09 -05:00
83 lines
2.3 KiB
HTML
83 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<script type="text/javascript" src="../jquery-1.2.6.js"></script>
|
|
<script type="text/javascript" src="../ui/ui.core.js"></script>
|
|
<script type="text/javascript" src="../ui/ui.draggable.js"></script>
|
|
<script type="text/javascript" src="../ui/ui.resizable.js"></script>
|
|
|
|
<script>
|
|
|
|
$(function() {
|
|
$("#userList").sortable({
|
|
connectWith: ["#selectedUsers"]
|
|
});
|
|
$("#selectedUsers").sortable({
|
|
connectWith: ["#userList"]
|
|
});
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
body {
|
|
font-family: arial;
|
|
font-size: 12px;
|
|
}
|
|
|
|
ul {
|
|
margin:0; padding: 5px;
|
|
list-style: none;
|
|
background: #efefef;
|
|
}
|
|
|
|
li {
|
|
width: 100px;
|
|
padding: 10px; margin: 5px;
|
|
background: lightblue;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="sortable-container">
|
|
|
|
<div id="example1">
|
|
|
|
<button onclick="$('#selectedUsers').sortable('enable')">Enable</button>
|
|
<button onclick="$('#selectedUsers').sortable('disable')">Disable</button>
|
|
<button onclick="alert($('#selectedUsers').sortable('serialize'))">Serialize!</button>
|
|
<button onclick="alert($('#selectedUsers').sortable('toArray'))">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> |