通过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 相关文章推荐
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
浅析JavaScript中的变量提升
Jun 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
基于文本的搜索
2006/10/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
django中模板的html自动转意方法
2018/05/27 Python
Python简易版图书管理系统
2019/08/12 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
python 图像增强算法实现详解
2021/01/24 Python
银河香水:Galaxy Perfume
2019/03/25 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
户外用品商店创业计划书
2014/01/29 职场文书
元旦获奖感言
2014/03/08 职场文书
高中学生期末评语
2014/04/25 职场文书
大学生就业自荐书
2014/06/16 职场文书
私人委托书格式
2014/09/10 职场文书
李白故里导游词
2015/02/12 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015年教务工作总结
2015/05/23 职场文书
《灰雀》教学反思
2016/02/19 职场文书