注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一线天色 天宇星辰

天下武功,唯快不破

 
 
 

日志

 
 

拖动DIV的简单实现  

2010-12-25 20:58:45|  分类: 软件开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE>拖动DIV的简单实现</TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

  <META NAME="Author" CONTENT="一线天色 天宇星辰">

  <META NAME="Keywords" CONTENT="拖动DIV的简单实现 一线天色 天宇星辰">

  <META NAME="Description" CONTENT="拖动DIV的简单实现">

 </HEAD>

 

 <BODY>

    <div id="title" style="width: 280px;height: 20px;position: absolute;background:#00FF00;z-index: 200;cursor: default;">这是标题(拖一下试试看) &nbsp; <a title="点击关闭窗口" href="javascript:void(0);" onclick="closeWindow('title','content');">X</a></div>

    <div id="content" style="margin-top:20px; width: 280px;height: 120px;position: absolute;background: #99FF33;z-index: 200;">浮动层主体内容</div>

    <h1>Hi 一线天色 天宇星辰!</h1>

    <SCRIPT type="text/javascript">

    function dragDiv(titleId, contentId) {

       var isNeedDrag, div, x, y, div2;

       div = document.getElementById(titleId);

       div2 = document.getElementById(contentId);

       div.onmousedown = function(e) {

           e = e || window.event;

           isNeedDrag = true;

           div.style.cursor = "move";

           x = e.offsetX || e.layerX;

           y = e.offsetY || e.layerY;

           return false;

       }

       document.onmouseup = function() {

           isNeedDrag = false;

           div.style.cursor = "default";

           return false;

       }

       document.onmousemove = function(e) {

           e = e || window.event;

           if (isNeedDrag) {

              div.style.left = e.clientX - x + "px";

              div.style.top = e.clientY - y + "px";

              if(div2){

                  div2.style.left = e.clientX - x + "px";

                  div2.style.top = e.clientY - y + "px";

              }

              return false;

           }

       }

    }

    function closeWindow(titleId, contentId){

       var div = document.getElementById(titleId);

       var div2 = document.getElementById(contentId);

       div.style.display="none";

       if(div2){

           div2.style.display="none";

       }

    }

    window.onload = function() {

       dragDiv("title", "content");

    }

</SCRIPT>

    </BODY>

</HTML>

本文设计了一个function dragDiv(titleId, contentId)的函数,如果你的浮层是由title和文本组成的,那么你只要安装示例程序调用即可,如果你的是整个一个整体,则只需要传入一个titleid即可

如:dragDiv("title");

以上程序在IEFirefox下调试通过!

  评论这张
 
阅读(156385)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017