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设置图片等比例缩小的方法
Apr 29 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现增删改查
Dec 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
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
教师绩效考核方案
2014/01/21 职场文书
运动会广播稿80字
2014/01/23 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
公司放假通知范文
2015/04/14 职场文书
三八妇女节主持词
2015/07/04 职场文书
运动会5000米加油稿
2015/07/21 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
辞职信怎么写?
2019/05/21 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL