zoukankan      html  css  js  c++  java
  • 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;100px;height:60px;border:1px solid silver;left:100px;top:100px;background:white;z-index:9999;">
            </div>

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

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

  • 相关阅读:
    redis(4)
    基于参数shared_pool_reserved_size进一步理解共享池shared pool原理
    如何诊断oracle数据库运行缓慢或hang住的问题
    freqently asked questions for oracle database server patching
    cpu 过高检查
    DB2和Oracle区别
    RMAN迁移数据库到ASM(一)创建ASM磁盘组
    Oracle 12C 块修改跟踪(Block chage tracking) 功能
    Oracle 12c RMAN备份与恢复实验
    Oracle ASM磁盘组迁移指导手册
  • 原文地址:https://www.cnblogs.com/handboy/p/7153258.html
Copyright © 2011-2022 走看看