jQuery实现的跨容器无缝拖动效果代码


Posted in Javascript onJune 21, 2016

本文实例讲述了jQuery实现的跨容器无缝拖动效果。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>New Web Project</title>
  <link type = "text/css" href = "jquery-ui.css" rel = "stylesheet"/>
  <style type = "text/css">
   .EZ_SITE{width:990px; position: relative; margin:0px auto; top:30px;}
   .EZ_SITE_HEADER{width:990px; position: absolute; height:80px; border:1px solid red;}
   .ez_site_border{position: absolute; width:100%; height:100%; background-color:#000;}
   .ez_site_background{position: absolute; width:100%; height:100%;background-color:#fff; margin:0px;}
   .EZ_SITE_PAGE{width:990px; height:500px; position: absolute;top:82px;border:1px solid blue;} 
   .ez_page_content{width:100%; height:100%; position: absolute;}
   .EZ_SITE_FOOTER{width:990px; position: absolute; height:80px; top:580px;border:1px solid green;}   
   #dragMe{
    position:absolute;
    top:100px;
    left:100px;
    width:100px;
    height:50px;
    border:1px solid green;
    line-height:50px;
    cursor:move;
    text-align: center;
    z-index:999;
    background:#008800;
   }
   .box{
    position:absolute;
    top:100px;
    left:300px;
    width:300px;
    height:200px;
    border:1px solid blue;
    line-height:200px;
    cursor:move;
    text-align: center;
    z-index:990;
    background:#ddd;
   }
  </style>
  <script type = "text/javascript" src = "jquery-1.7.1.min.js"> </script>
  <script type = "text/javascript" src="jquery-ui.js"> </script>
  <script type = "text/javascript">
   $(function(){
    var obj = {
       drop:function(e,ui){
        var handle = ui.helper,
         _left = handle.offset().left,
         _top = handle.offset().top,
         cleft = $(this).offset().left,
         ctop = $(this).offset().top;
        handle.appendTo($(this)).css({
         left:_left-cleft,
         top:_top-ctop
        });
       }
    }; 
    $("#addBox").click(function(){
     var $box = $('<div class = "box">box</div>');
     $box.appendTo($("#EZ_SITE_PAGE")).draggable().droppable(obj);
    })
    $("#dragMe,#box").draggable({
     containment:"#EZ_SITE"
    });
    $(".ez_page_content,#box").droppable(obj);
   })
  </script>
 </head>
 <body>
  <div id="EZ_SITE" class="EZ_SITE">
   <div id="EZ_SITE_HEADER" class="EZ_SITE_HEADER">
    <div class="ez_site_border">
     <div class="ez_site_background"></div>
    </div>
    <div class="ez_page_content">
     <div style="position: absolute; top:20px; left:30px;">这是一个网站标题</div>
     <div style="position: absolute; top:20px; left:300px;" class="mk-element-navigation">
      <a href="javascript:;" id="index">主页</a>
      <a href="javascript:;" id="product">产品</a>
     </div>
    </div>
   </div>
   <div id="EZ_SITE_PAGE" class="EZ_SITE_PAGE">
    <input type = "button" value = "添加容器" id = "addBox"/>
    <div class="ez_site_border" style="height:500px;">
     <div class="ez_site_background"></div>
    </div>
    <div id="index" class="ez_page_content" style="opacity: 1;" current="true">
     <div style="position: absolute; top:20px; left:30px; font-weight: bold;">这是一个主页面</div>
     <div id = "dragMe">dragMe</div>
    </div>
   </div>
   <div id="EZ_SITE_FOOTER" class="EZ_SITE_FOOTER">
    <div class="ez_site_border">
     <div class="ez_site_background"></div>
    </div>
    <div class="ez_page_content">
     <div style="position: absolute; top:20px; left:30px;">这里是页脚</div>
    </div>
   </div>
  </div>
 </body>
</html>

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

Javascript 相关文章推荐
javascript iframe编程相关代码
Dec 28 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 #Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 #Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 #Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 #Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 #Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 #Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 #Javascript
You might like
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
vue-music关于Player播放器组件详解
2017/11/28 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
python3中的md5加密实例
2018/05/29 Python
使用Python处理BAM的方法
2018/09/28 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
详解python中*号的用法
2019/10/21 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
面向对象编程的优势是什么
2015/12/17 面试题
关于廉洁的广播稿
2014/01/30 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
店长岗位职责
2015/02/11 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书