jquery拖动层效果插件用法实例分析(附demo源码)


Posted in Javascript onApril 28, 2016

本文实例讲述了jquery拖动层效果插件用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag Drop Panels - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" >
$(function(){
  $('.dragbox')
  .each(function(){
    $(this).hover(function(){
      $(this).find('h2').addClass('collapse');
    }, function(){
      $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
      $(this).find('.configure').css('visibility', 'visible');
    }, function(){
      $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function(){
      $(this).siblings('.dragbox-content').toggle();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
  });
  $('.column').sortable({
    connectWith: '.column',
    handle: 'h2',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    opacity: 0.4,
    stop: function(event, ui){
      $(ui.item).find('h2').click();
      var sortorder='';
      $('.column').each(function(){
        var itemorder=$(this).sortable('toArray');
        var columnId=$(this).attr('id');
        sortorder+=columnId+'='+itemorder.toString()+'&';
      });
      alert('SortOrder: '+sortorder);
      /*Pass sortorder variable to server using ajax to save state*/
    }
  })
  .disableSelection();
});
</script>
</head>
<body>
  <h3>Drag n Drop Panels</h3>
  <div class="column" id="column1">
    <div class="dragbox" id="item1" >
      <h2>Handle 1</h2>
      <div class="dragbox-content" >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum velit ultricies orci pharetra elementum. In massa mauris, varius sed tempus a, iaculis sed erat. Ut sollicitudin tellus mollis arcu laoreet semper. Suspendisse ut felis odio. Aliquam auctor, tortor sit amet suscipit elementum, nunc ante dictum lectus, ac accumsan justo nunc sed velit. Sed sollicitudin varius tortor vitae varius. Aliquam interdum, nisl consectetur laoreet commodo, metus massa sagittis nisl, non venenatis lacus mi nec tortor. Ut malesuada auctor dolor, id pulvinar est malesuada sed. Aliquam sed posuere orci. 
      </div>
    </div>
    <div class="dragbox" id="item2" >
      <h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
      <div class="dragbox-content" >
        Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. Etiam arcu eros, placerat sed rhoncus at, porta et elit. Aenean pharetra ante neque. Aenean id egestas orci. Suspendisse potenti. Nunc at magna leo, sed porta erat. Proin eget neque turpis, vel blandit massa. Donec vel tortor magna. Curabitur id nibh magna, nec hendrerit nibh. 
      </div>
    </div>
    <div class="dragbox" id="item3" >
      <h2>Handle 3</h2>
      <div class="dragbox-content" >
        Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare. Nam sed mauris vitae justo convallis placerat. Curabitur viverra, ipsum id volutpat sollicitudin, mi nisi condimentum nulla, nec dapibus velit libero eget orci. Nam purus lectus, imperdiet pharetra pulvinar ac, sodales sit amet sem. Ut vel mollis ante. Vivamus consectetur varius risus eu hendrerit. Sed scelerisque euismod leo, quis accumsan justo venenatis eu. Ut risus lorem, aliquet id fermentum nec, auctor ut enim. Ut pretium elementum turpis vel dignissim. 
      </div>
    </div>
  </div>
  <div class="column" id="column2" >
    <div class="dragbox" id="item4" >
      <h2>Handle 4</h2>
      <div class="dragbox-content" >
        Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper. Duis varius velit et dui auctor pretium bibendum urna gravida. Sed euismod dui in tellus euismod euismod. Nam convallis ornare fermentum. Aliquam libero augue, ullamcorper vitae lacinia at, vestibulum et risus. Praesent accumsan ultrices purus eu consequat. Phasellus posuere lobortis malesuada. Curabitur ac orci eu dui vulputate porttitor. Sed a urna et odio vulputate euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In volutpat, tortor eu dapibus vestibulum, risus metus eleifend ipsum, quis lobortis elit dolor vel ligula. Aliquam ultrices nunc in elit bibendum pharetra. Ut non ante sagittis arcu imperdiet posuere. Duis consectetur massa sit amet enim scelerisque consequat et eget magna. Curabitur tristique molestie sem quis vulputate. Sed eleifend urna neque. Nam placerat eros non augue consequat vestibulum. 
      </div>
    </div>
    <div class="dragbox" id="item5" >
      <h2>Handle 5</h2>
      <div class="dragbox-content" >
        Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna. Duis nec scelerisque orci. Nullam a enim est, et eleifend nunc. Proin dui eros, vulputate eget consectetur quis, ultrices ac sem. Nulla aliquam metus eu magna placerat placerat. Suspendisse eget tellus turpis, et ultricies nisi. Etiam in diam mi, sed tincidunt eros. Phasellus convallis aliquam arcu, vitae fringilla quam pharetra sed. In at augue at nibh placerat feugiat at id elit. Curabitur sit amet quam ut turpis molestie blandit in vel nulla. 
      </div>
    </div>
  </div>
  <hr style="clear:both;" />
<p>
Demo Provided By: <a href="http://webdeveloperplus.com" title="Web Developer Plus - Ultimate Web Development & Design Resource" >Web 
Developer Plus</a></p>
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Angular实现响应式表单
Aug 04 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 #Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 #Javascript
Bootstrap Chart组件使用教程
Apr 28 #Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 #Javascript
location.hash保存页面状态的技巧
Apr 28 #Javascript
字符串反转_JavaScript
Apr 28 #Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 #Javascript
You might like
PHP ajax 分页类代码
2008/11/13 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php正则表达式学习笔记
2015/11/13 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
工作评语大全
2014/04/26 职场文书
大学课外活动总结
2014/07/09 职场文书
买房子个人收入证明
2014/10/12 职场文书
2015年科室工作总结
2015/04/10 职场文书
上甘岭观后感
2015/06/10 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server