jQueryUI Sortable 应用Demo(分享)


Posted in jQuery onSeptember 07, 2017

最近工作用需要设计一个自由布局的页面设计。我选了jQuery UI 的 sortable ,可以拖拽,自由排序 使用很方便,写一个demo,做个记录。

第一、单项目自由排序

下图效果

jQueryUI Sortable 应用Demo(分享)

代码段:

<script type="text/javascript"> 
 
  $(function () {
    $("#box_wrap").sortable({
      helper: "clone",
      placeholder: "box-holdplace",
      sort: function (e, ui) {
        //排序时触发事件
      },
      // handle: ".handle",//指定元素内的某种元素才可以拖动,非常有用
    }).disableSelection();   
  });
</script>

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <link href="css/index.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap/js/bootstrap.min.js"></script>
 
  <!--Sortable -->
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
  <div class="box_wrap" id="box_wrap">
    <div class="box">
      test1
    </div>
    <div class="box">
      test2
    </div>
    <div class="box">test3
    </div>
  </div>
</body>
</html>

第二、多排序组之间自由拖拽

jQueryUI Sortable 应用Demo(分享)

代码段:

<script type="text/javascript">
    
  $(function () {
    $("#box_wrap1,#box_wrap2").sortable({
      connectWith: ".box_wrap",
      helper: "clone",
      cursor: "move",//移动时候鼠标样式    
      opacity: 0.5, //拖拽过程中透明度
      placeholder: "box-holdplace",//占位符className,设置一个样式    
    }).disableSelection();
  });
</script>

html 代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <link href="css/index.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />

  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap/js/bootstrap.min.js"></script>

  <!--Sortable -->
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>
<body>
  <div class="container">
    <div class="row">
      <div class="column col-md-6">
        <div class="box_wrap" id="box_wrap1">
          <div class="box">
            left-test1
          </div>
          <div class="box">
            left-test2
          </div>
          <div class="box">
            left-test3
          </div>
        </div>
      </div>
      <div class="column col-md-6">
        <div class="box_wrap" id="box_wrap2" >
          <div class="box">
            test1
          </div>
          <div class="box">
            test2
          </div>
          <div class="box">
            test3
          </div>
        </div>
      </div>
    </div>   
  </div>
</body>
</html>

上面另种是工作中比较常用的排序形式。

以上这篇jQueryUI Sortable 应用Demo(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery图片放大镜效果
Jun 23 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 #jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 #jQuery
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
jquery+css实现下拉列表功能
Sep 03 #jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
You might like
用PHP读注册表
2006/10/09 PHP
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
python开发前景如何
2020/06/11 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
综合测评自我评价
2015/03/06 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
孔子观后感
2015/06/08 职场文书
初中语文教学随笔
2015/08/15 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python