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

1.引入文件

2.给元素附上sortable类

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来实现拖拽排序的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。