javascript实现可拖动DIV层

原文发布时间为:2009-05-04 —— 来源于本人的百度文章 [由搬家工具导入]

注意以下红色部分是关键.如果不使用      document.documentElement,而使用document.body,则在FF会出现问题;如果不使用background:red; 样式,则在IE中会出现只有当鼠标放在DIV边框上时才能拖动.

        var offset_x;
        var offset_y;
        function Milan_StartMove(oEvent)
        {
            var whichButton;
            if(document.all&&oEvent.button==1) whichButton=true;
            else { if(oEvent.button==0)whichButton=true;}
            if(whichButton)
            {
                var oDiv=document.getElementById("oDiv");
                offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft);
                offset_y=parseInt(oEvent.clientY-oDiv.offsetTop);
                document.documentElement.onmousemove=function(mEvent)
                {   
                    var eEvent;
                    if(document.all) eEvent=event;
                    else{eEvent=mEvent;}
                    var oDiv=document.getElementById("oDiv");
                    var x=eEvent.clientX-offset_x;
                    var y=eEvent.clientY-offset_y;
                    oDiv.style.left=(x)+"px";
                    oDiv.style.top=(y)+"px";
                }
            }
        }
        function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; }

<div id="oDiv" onmousedown="Milan_StartMove(event)" onmouseup="Milan_StopMove(event)" style="cursor:move;position:absolute;width:100px;height:60px;border:1px solid silver;left:100px;top:100px;background:white;z-index:9999;">
        </div>

以上为跨IE6和FF浏览器的解决方案,理清思路后,做起来相当简单.

注意:移动到页面外部将出现问题。。。

时间: 2024-11-09 19:38:10

javascript实现可拖动DIV层的相关文章

Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Js无刷新添加新层</title><style>body {margin:0px;padding:0px;font-size:12px;text-align:center;}body > div {text-ali

javascript如何实现随意拖动的层

javascript如何实现随意拖动的层: 在很多应用中都有拖动层移动的效果的扩展,下面就通过实例简单介绍一下如何利用javascript实现随意拖动一个层的效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/"

JS拖动DIV布局

方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

JavaScript:Div层拖动效果

Div层拖动效果图: 实现: CSS: <style> div { position:relative; } </style> JS: <script type="text/javascript"> var mouseover=true var xcoor; var ycoor; function coordinates() { if (event.srcElement.id.indexOf("wishbroad") == 0)

拖动鼠标改变div层的大小宽度

<html> <head> <title>拖动鼠标改变div层的大小宽度-石家庄色彩顾问-亿诚</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-box-sizing: border-box } #testDiv {

JavaScript学习之DIV层与图像

DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距离. 绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置,可借助style属性直接设置: style="position:absolute;left:距离左边距离;top:距离顶部距离" (2)相对定位(relative):需要有一个参照元素,设置好相对位置和参照

Javascript 简单实现鼠标拖动DIV

http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/article/10578.htm <html> <head><title>拖动效果函数演示 by Longbill.cn</title> <style> body { font-size:12px; color:#333333; border : 0px

javascript拖动div

div拖动代码,在用此代码之前,你可能需要将你需要拖动的元素style设置position: absolute; #textareaSavaDiv{ position: absolute; right:50px; width:300px; height:300px; } html <div id="textareaSavaDiv"> <input type="text" id="username"/> </div&g

纯JavaScript+HTML+CSS 的div弹出框

CSS <style> .mask { width:100%; height:100%; position: absolute; top:0; left:0; filter: alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; background-color: #ffffff; z-index:2; display: none; } div.sample_popup { height:auto; border:10px solid #64646