jQuery-ui插件sortable实现自由拖动排序


Posted in jQuery onDecember 01, 2018

本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法,供大家参考,具体内容如下

此为网上资源demo自己做了修改,记录下方便日后的学习。

效果展示:

jQuery-ui插件sortable实现自由拖动排序

代码展示:

<!doctype html>
<html lang="en">
<!-- 
  学习功能:使用Jquery-ui的sortable插件实现拖动排序
  author: lisa于2018-5-30
-->
<head>
  <meta charset="utf-8">
  <title>终极版拖动排序</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 
    .container {
      width: 350px;
      margin: 60px auto;
    }
 
    .container:after {
      content: "";
      display: block;
      clear: both;
    }
 
    .drag {
      width: 100%;
      height: 60px;
      float: left;
      margin: -8px 0;
    }
 
    ul li {
      list-style: none;
    }
 
    .innerdiv {
      padding: 10px;
      height: 100%;
    }
 
    .innerdiv2 {
      border: 1px solid #bdb9b9;
      background: #fff;
      height: 100%;
    }
 
    .move {
      width: 65px;
      height: 100%;
      background: pink;
      float: right;
      cursor: pointer;
    }
 
    .msg {
      display: inline-block;
      width: 130px;
      padding: 6px 6px 6px 12px;
      vertical-align: top;
    }
 
    .btn {
      background: pink;
      color: #fff;
      padding: 0px 10px;
      border-radius: 4px;
      border: 1px;
      height: 30px;
      cursor: pointer;
      font-size: 1.4rem;
      float: right;
      margin-right: 10px;
      margin-top: 10px;
    }
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
 
<body>
  <div class="container">
    <ul class="sortable">
      <li id="draggable1" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list1</span>
          </div>
        </div>
      </li>
      <li id="draggable2" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list2</span>
          </div>
        </div>
      </li>
      <li id="draggable3" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list3</span>
          </div>
        </div>
      </li>
      <li id="draggable4" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list4</span>
          </div>
        </div>
      </li>
      <li id="draggable5" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list5</span>
          </div>
        </div>
      </li>
      <li id="draggable6" class="drag">
        <div class="innerdiv">
          <div class="innerdiv2">
            <div class="move"></div>
            <span class="msg">list6</span>
          </div>
        </div>
      </li>
    </ul>
    <button class="btn">提交</button>
  </div>
</body>
 
</html>
<script>
  $(function () {
    var bttn = $('.container .btn');
    var arr = '';
    var sort = $(".sortable").sortable({
      handle: ".move",
      delay: 0,
      cursor: 'move',
      revert: true,
      stop: bttn.click(function (event) {
        //记录sort后的id顺序数组
        var arr = $(".sortable").sortable('toArray');
        console.log(arr);
      })
    });
 
  });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
jQuery实现网页拼图游戏
Apr 22 #jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 #jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 #jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
You might like
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
JavaScript模块详解
2017/12/18 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
详解python中的异常和文件读写
2021/01/03 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
单位单身证明范本
2014/01/11 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
三八妇女节活动总结
2014/05/04 职场文书
党员四风剖析材料
2014/08/27 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
会计试用期自我评价
2015/03/10 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书