通过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 遍历对象中的子对象
Jul 03 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
ES6关于Promise的用法详解
May 07 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 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
PHP has encountered an Access Violation
2007/01/15 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
javascript date格式化示例
2013/09/25 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python实现命令行通讯录实例教程
2016/08/18 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
应届生个人求职信模板
2013/11/26 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
商场总经理岗位职责
2014/02/03 职场文书
成事在人观后感
2015/06/16 职场文书
父母教会我观后感
2015/06/17 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL