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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现查看图片功能
Dec 01 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大文件分割上传 PHP分片上传
2017/08/28 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
JS实现放烟花效果
2020/03/10 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
django创建简单的页面响应实例教程
2019/09/06 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
出国留学自荐信
2013/10/25 职场文书
五一手机促销方案
2014/03/08 职场文书
森林防火标语
2014/06/23 职场文书
保险公司演讲稿
2014/09/02 职场文书
2014年质量工作总结
2014/11/22 职场文书
图书馆义工感想
2015/08/07 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
高中化学教学反思
2016/02/22 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书