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 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
在Vue中使用antv的示例代码
Jun 29 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中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
php中yii框架实例用法
2020/12/22 PHP
取得父标签
2006/11/14 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
实习生自荐信范文分享
2013/11/27 职场文书
临时租车协议范本
2014/09/23 职场文书
八项规定整改方案
2014/10/01 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
详解Nginx 工作原理
2021/03/31 Servers
解读Vue组件注册方式
2021/05/15 Vue.js
用JS写一个发布订阅模式
2021/11/07 Javascript
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS