通过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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 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
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
详解python播放音频的三种方法
2019/09/23 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
致1500米运动员广播稿
2014/02/07 职场文书
初一新生军训方案
2014/05/22 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
村班子对照检查材料
2014/08/18 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
语文复习计划
2015/01/19 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
浅谈Python项目的服务器部署
2021/04/25 Python
写好Python代码的几条重要技巧
2021/05/21 Python
如何在Python项目中引入日志
2021/05/31 Python
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
Fluentd搭建日志收集服务
2022/09/23 Servers