上一篇屏蔽右键操作，加入自己的右键事件并操作target元素，无非就是上下移动而已，使用jQuery UI 更简单更稳定。
实例如下，是一个官网的API示例（小改）
<html>
<head>
<title>jQuery UI Sortable</title>
<script src="scripts/jquery-1.8.2.js"></script>
<script src="scripts/jquery-ui-1.8.24.js"></script>
<style>
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#sortable, #sub_sortable {
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li, #sub_sortable li {
margin: 0 3px 3px 3px;
padding: 10px;
padding-left: 30px;
font-size: 18px;
}
#sortable li input.readonly, #sub_sortable li input.readonly {
border:thin dotted blue;
text-align:center;
}
</style>
<script>
function _dbClick(obj) {
$(obj).removeAttr('readonly').removeClass("readonly");
}
function _blur(obj) {
$(obj).attr({ 'readonly': 'readonly', "class": "readonly" });
}
$(function () {
//好吧，就这一句就够了
$("#sortable").sortable();
$("#sub_sortable").sortable();
});
</script>
</head>
<body>
<ul id="sortable">
<li>
<input type="text" value="1" class="readonly" readonly="readonly" onblur="_blur(this)" ondblclick="_dbClick(this)" />
<span>上下拖动</span>
</li>
<li>
<input type="text" value="1" class="readonly" readonly="readonly" onblur="_blur(this)" ondblclick="_dbClick(this)" />
<span>上下拖动</span>
</li>
<li>
<input type="text" value="1" class="readonly" readonly="readonly" onblur="_blur(this)" ondblclick="_dbClick(this)" />
<span>上下拖动</span>
</li>
<li>
<ul id="sub_sortable">
<li>
<input type="text" value="1" class="readonly" readonly="readonly" onblur="_blur(this)" ondblclick="_dbClick(this)" />
<span>上下拖动</span>
</li>
<li>
<input type="text" value="1" class="readonly" readonly="readonly" onblur="_blur(this)" ondblclick="_dbClick(this)" />
<span>上下拖动</span>
</li>
<li>
<input type="text" value="1" class="readonly" readonly="readonly" onblur="_blur(this)" ondblclick="_dbClick(this)" />
<span>上下拖动</span>
</li>
</ul>
</li>
</ul>
</body>
</html>
