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编写textarea输入字数限制代码
Mar 23 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
jQuery的学习步骤
2011/02/23 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
教育局长自荐信范文
2013/12/22 职场文书
2014年食堂工作总结
2014/11/20 职场文书
医德医风个人总结
2015/02/28 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python