您的位置：首页 > Web前端 > JQuery

通过jquery-ui中的sortable来实现拖拽排序的简单实例

2016-05-24 16:20 781 查看

1.引入文件

<script src="{sh::PUB}js/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="Public/css/jquery-ui.min.css">
<script src="{sh::PUB}js/jquery-ui.min.js"></script>

2.给元素附上sortable类

<tbody class="sortable">
<tr></tr>
<tr></tr>
</tbody>

3.开启并配置

$(function() {
$(".sortable").sortable({
cursor: "move",
items: "tr", //只是tr可以拖动
opacity: 0.6, //拖动时，透明度为0.6
revert: true, //释放时，增加动画
update: function(event, ui) { //更新排序之后
var categoryids = $(this).sortable("toArray");
var $this = $(this);
$.ajax({
url: '{sh::U("AgentGoods/ajax","todo=categoryDragsort")}',
type: 'POST',
data: 'categoryids=' + categoryids,
success: function(json) {
if (json == 1) {
layer.msg('移动成功', {
icon: 1
});
} else {
$this.sortable("cancel");
layer.msg('移动失败', {
icon: 2
});
}
}
});
}
});
$(".sortable").disableSelection();
});

4.后台处理

$categoryids  = $this->_post('categoryids');
$categoryidsArr = explode(",",$categoryids);
foreach ($categoryidsArr as $k => $v) {
$data['sort'] = count($categoryidsArr) - $k;
$data['id']  = $v;
M('Agentgoods_category')->where(array('id'=>$v))->save($data);
}
exit('1');

小结：这种排序，不是交换，而是彻底的整体调整

以上这篇通过jquery-ui中的sortable来实现拖拽排序的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery-ui sortable 拖拽排序

相关文章推荐

新的分享

章节导航