使用滑鼠拖曳列表中的元素做重新排序-jQuery UI Sortable Widget

<style type="text/css">
ul,li{list-style-type:none;}
ul.items li{border:1px solid #ccc;padding:5px 0;background-color:#ccc;color:#000;padding:2px;margin:1px 0;}
ul.items li.placeholder {position:relative;}
ul.items li.placeholder:before {position: absolute;}
ul.items li:hover{cursor:move;}
.deptList{margin:0 auto;width:200px;height:400px;}
.deptList ul.items{width:200px;height:400px;overflow:auto;border:1px solid #ccc;padding:0;}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var group = $("ul.items").sortable({
update: function (event, ui) {
var data = '';
$("ul.items li").each(function (i, el) {
var p = $(el).attr('data-id');
data += ',' +p;
});
if (data != '') { data = data.substr(1);}
$('#catValue').val(data);
}
});
});
</script>
<body class="dragging">
<div class="deptList">
<ul class='items'>
<li data-id="a">item1</li>

<li data-id="b">item2</li>

<li data-id="c">item3</li>

<li data-id="d">item4</li>

</ul>

</div>
<input type="hidden" id="catValue" name="catValue"></input>
</body>

API：Sortable Widget