jquery簡單拖拽實現(xiàn)動态排序效果：

1、html代碼

<script  src="static/js/jquery-1.12.4.min.js"></script>
<script src="static/js/jquery-ui.min.js"></script> 

<div id="options">
    <dd class="opt">
        <input value='' name="key" type="text">
        <input value='' name="value" type="text">
        <input value='' name="answer" type="checkbox" checked>
        <span class="fa fa-arrows">拖動</span>
    </dd>
    <dd class="opt">
        <input value='' name="key" type="text">
        <input value='' name="value" type="text">
        <input value='' name="answer" type="checkbox" checked>
        <span class="fa fa-arrows">拖動</span>
    </dd>
    <dd class="opt">
        <input value='' name="key" type="text">
        <input value='' name="value" type="text">
        <input value='' name="answer" type="checkbox" checked>
        <span class="fa fa-arrows">拖動</span>
    </dd>
    <dd class="opt">
        <input value='' name="key" type="text">
        <input value='' name="value" type="text">
        <input value='' name="answer" type="checkbox" checked>
        <span class="fa fa-arrows">拖動</span>
    </dd>                                           
</div>

2、js代碼

<script type="text/javascript">
$(function () {
    $("#options").sortable({
        cursor: "move",
        items: "dd", //僅僅是(shì)dd能夠拖動
        opacity: 0.6, //拖動時，透明度爲0.6
        revert: true, //釋放時，添加動畫
        update: function (event, ui) { }//更新排序之後            
    });
});
</script>

jquery拖拽排序