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 Ajax之load()方法
Oct 12 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
深入浅析python继承问题
2016/05/29 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
值传递还是引用传递
2015/02/08 面试题
安全教育实施方案
2014/03/02 职场文书
团日活动总结书格式
2014/05/08 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
毕业欢送会致辞
2015/07/29 职场文书
退休职工欢送会致辞
2015/08/01 职场文书