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

简介:

422101-20160414174629801-1488792466.png

422101-20160414174641301-140295975.png

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');

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


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5392035.html,如需转载请自行联系原作者

相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1222 0
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
2246 0
|
10天前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
6月前
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
7月前
|
开发者
SAP UI5 初学者教程之二十三 - 列表控件的排序 Sort 和分组 Group 试读版
SAP UI5 初学者教程之二十三 - 列表控件的排序 Sort 和分组 Group 试读版
35 0
|
8月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
41 0
SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
|
JavaScript
VUE element-ui之table表格全局排序、调用后端接口排序功能
VUE element-ui之table表格全局排序、调用后端接口排序功能
1228 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
122 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
332 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
211 0

相关课程

更多