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


Posted in Javascript onMay 24, 2016

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

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

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

Javascript 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 #Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 #Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 #Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 #Javascript
JavaScript中判断数据类型的方法总结
May 24 #Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 #Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 #Javascript
You might like
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
js断点调试经验分享
2017/12/08 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
判断网页编码的方法python版
2016/08/12 Python
python 删除非空文件夹的实例
2018/04/26 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python可视化实现KNN算法
2019/10/16 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
车辆工程专业求职信
2014/04/28 职场文书
儿园租房协议书范本
2014/12/02 职场文书
后进生评语大全
2015/01/04 职场文书
应急管理工作总结2015
2015/05/04 职场文书
公司档案管理制度
2015/08/05 职场文书
个人工作决心书
2015/09/22 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
python实现简单的三子棋游戏
2022/04/28 Python