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实现图片放大点击切换
Jun 06 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
html中两种获取标签内的值的方法
Jun 16 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插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
jquery获取radio值实例
2014/10/16 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
python3实现表白神器
2019/04/09 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
怎样声明接口
2014/09/19 面试题
.NET方向面试题
2014/11/20 面试题
采购内勤岗位职责
2013/12/10 职场文书
安全生产检查通报
2014/01/29 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
洗发水广告词
2014/03/13 职场文书
捐助倡议书
2015/01/19 职场文书