通过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 相关文章推荐
ParseInt函数参数设置介绍
Jan 02 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
webpack3之loader全解析
Oct 26 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
小程序实现搜索框功能
Mar 26 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python利用线程实现多任务
2020/09/18 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
店长职务说明书
2014/02/04 职场文书
党员服务承诺书
2014/05/28 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
详解用Python把PDF转为Word方法总结
2021/04/27 Python
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电