jquery简单拖拽实现动态排序效果:
1、html代码
<script src=none"></script>
<script src=none"></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", //仅仅是dd能够拖动
opacity: 0.6, //拖动时,透明度为0.6
revert: true, //释放时,添加动画
update: function (event, ui) { }//更新排序之后
});
});
</script>
jquery拖拽排序