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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
js控制框架刷新
Aug 01 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
vue 中filter的多种用法
Apr 26 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
关于JavaScript回调函数的深入理解
Jun 27 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中上传大体积文件时需要的设置
2006/10/09 PHP
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python中turtle作图示例
2017/11/15 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
python实现猜拳游戏
2020/03/04 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
门卫人员岗位职责
2013/12/24 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
检讨书格式
2015/01/23 职场文书
大学生自我评价范文
2015/03/03 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
python3操作redis实现List列表实例
2021/08/04 Python