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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
Vue响应式原理详解
Apr 18 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
php curl_init函数用法
2014/01/31 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
php实现图片压缩处理
2020/09/09 PHP
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python判断变量是否已经定义的方法
2014/08/18 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
如何写一个自定义标签
2012/12/28 面试题
作风建设剖析材料
2014/10/06 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
深入探讨opencv图像矫正算法实战
2021/05/21 Python