jQuery UI Draggable + Sortable 结合使用(实例讲解)


Posted in jQuery onSeptember 07, 2017

工作中需要将一个左边的设计好的控件,拖拽到右边的面板中,同时保持右边面板中的控件自由排序,这时候就需要及支持拖拽又支持排序的操作了,

Demo截图:从左边控件拖到右边区域

jQuery UI Draggable + Sortable 结合使用(实例讲解)

代码段:

<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();
 
    $(".dragable").draggable({
      connectToSortable: ".sortable",
      helper: "clone",
      // revert: "invalid",
      // handle: ".handle"
    });
  });
</script>

Html 代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="stylesheet" />
  <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" />
  <link href="css/index.css" 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 dragable">
            left-test1
          </div>
          <div class="box dragable">
            left-test2
          </div>
          <div class="box dragable">
            left-test3
          </div>
        </div>
      </div>
      <div class="column col-md-6">
        <div class="box_wrap sortable" id="box_wrap2">
          <div class="box">
            test1
          </div>
          <div class="box">
            test2
          </div>
          <div class="box">
            test3
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

以上这篇jQuery UI Draggable + Sortable 结合使用(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #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
You might like
php实现的Cookies操作类实例
2014/09/24 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
js实现验证码功能
2020/07/24 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Django封装交互接口代码
2020/07/12 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
诚信考试承诺书
2014/03/27 职场文书
环境保护建议书
2014/08/26 职场文书
家长给老师的感谢信
2015/01/20 职场文书
感谢信的格式
2015/01/21 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
生活委员竞选稿
2015/11/21 职场文书
因个人工作失误检讨书
2019/06/21 职场文书