兼容IE8、IE7、firefox、谷歌浏览器的可拖动DIV。

最新推荐文章于 2021-09-05 13:00:19 发布
最新推荐文章于 2021-09-05 13:00:19 发布
阅读量4.5k 收藏 2
点赞数 2
分类专栏： JS相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/achilles12345/article/details/49742055
版权

 今天要解决个问题，核心技术就是一个可拖动的DIV，主要参照了个例子：点击打开链接和点击打开链接，但是这个浏览器不兼容，本人做了一部分完善，这里贡献出来，供给大家参考。

<!DOCTYPE html>

<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            html,body
            {
                height:100%;
                width:100%;
                padding:0;
                margin:0;
            }
            
            .dialog
            {
                width:250px;
                height:250px;
                position:absolute;
                background-color:#ccc;
                -webkit-box-shadow:1px 1px 3px #292929;
                -moz-box-shadow:1px 1px 3px #292929;
                box-shadow:1px 1px 3px #292929;
                margin:10px;
            }
            
            .dialog-title
            {
                color:#fff;
                background-color:#404040;
                font-size:12pt;
                font-weight:bold;
                padding:4px 6px;
                cursor:move;
            }
            
            .dialog-content
            {
                padding:4px;
            }
        </style>
    </head>
    <body>
        <div id="dlgTest" class="dialog">
            <div class="dialog-title">Dialog</div>
            <div class="dialog-content">
                This is a draggable test.
            </div>
        </div>

        <script type="text/javascript">

        // IE8以及以下不支持addEventListener事件，这里用attachEvent代替。

        var Event = {
   addHandler: function (oElement, sEvent, fnHandler) {
       if(oElement.addEventListener) {
        oElement.addEventListener(sEvent, fnHandler, false);
       } else {
        oElement.attachEvent("on" + sEvent, fnHandler);
       }
   },
   removeHandler: function (oElement, sEvent, fnHandler) {
       oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
   }
}
            var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
                var draggingObj = null; //dragging Dialog
                var diffX=0;
                var diffY=0;
                
                function mouseHandler(e){
                    switch(e.type){
                        case 'mousedown':
                            draggingObj = validateHandler(e);//验证是否为可点击移动区域
                            if(draggingObj != null){
                                diffX=e.clientX-draggingObj.offsetLeft;
                                diffY=e.clientY-draggingObj.offsetTop;
                            }
                            break;
                        
                        case 'mousemove':
                            if(draggingObj){
                                draggingObj.style.left=(e.clientX-diffX)+'px';
                                draggingObj.style.top=(e.clientY-diffY)+'px';
                            }
                            break;
                        
                        case 'mouseup':
                            draggingObj =null;
                            diffX=0;
                            diffY=0;
                            break;
                    }
                };
                
                return {
                    enable:function(){
                        Event.addHandler(document, 'mousedown', mouseHandler);
                        Event.addHandler(document, 'mousemove', mouseHandler);
                        Event.addHandler(document, 'mouseup', mouseHandler);
                    },
                    disable:function(){
                Event.removeHandler(document, 'mousedown', mouseHandler);
                Event.removeHandler(document, 'mousemove', mouseHandler);
                Event.removeHandler(document, 'mouseup', mouseHandler);
                    }
                }
            }


    /**
* 获取要执行的对象
   **/
            function getDraggingDialog(e){
            // 兼容IE8、IE7处理
                var event = window.event || e;
var target = event.srcElement || event.target;
                while(target && target.className.indexOf('dialog-title')==-1){
                    target=target.offsetParent;
                }
                if(target!=null){
                    return target.offsetParent;
                }else{
                    return null;
                }
            }
            
            Dragging(getDraggingDialog).enable();
        </script>
    </body>

</html>

  另外这次搞清楚了一个问题，这个问题我查了网上其他资料，都说的不够清晰，这里我补充下。

 document.addEventListener('mousedown',down);这句话是将鼠标按下事件注册给document,这样由于“事件冒泡”，则页面上其他任何元素被触发这些事件，则最终事件是会被document对象捕获，如图：

渭水飞熊
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE8实现拖拽效果的优化版（针对于我之前的一篇文章的内容）
zzh94352201的博客
12-06 2211
在上一篇文章中，讲述的ie8实现拖拽效果的内容，对于在DIV块中的数据的改变是有很大问题的， 比如说，如果你要动态删除其中的一个DIV块，在删除之后，继续其他块的情况下，就会发生数据的不匹配（意思就是：之前删除的数据再次出现并且，挤掉原来的数据）这种情况， 其实出现这个情况的原因很简单，就是因为浏览器的缓存机制，因为在一开始加载页面的时候，会把你DIV块全部加入到你的父类节点的集合中，然后放在
针对于ie8的拖拽效果的jQuery实现的方法
zzh94352201的博客
11-30 3277
写这篇文章的原因是因为不久前，我刚遇到这样的问题；说实话，实在是太恶心拉 而且自己又是初学者，完全搞不懂浏览器的版本之间的兼容性原理，而网上有没有关于这方面的很好的解答，着实难受我了好一阵子。好在低版本的ie浏览器中还是支持某些条件的，废话不多说；看Jquery代码 /** *添加拖拽效果的js方法 *参数： */ $.fn.drag = function(){ var eleDrags =
可拖动、可关闭、透明标题的DIV弹出窗口，完美兼容各个浏览器
12-04
纯JS制作的可拖动、带关闭按钮、带透明标题栏的DIV弹出窗口，完美兼容IE,FF,chrome等浏览器，测试通过，里面的样式大家可以自己DIY
ie8和谷歌、火狐兼容方法
qq_40494988的博客
06-08 3017
1.元素绑定bobj.attachEvent("onclick",hi); //IE8中支持 addEventListener("click",hi); //IE8不支持2.标签文本设置 textContent // ie8不支持 innerText // 都支持3.元...
使谷歌浏览器兼容ie浏览器
weixin_39951217的博客
09-05 6609
由于某些网站只支持ie浏览器，如果我们想免去安装ie浏览器的麻烦，不妨在谷歌浏览器安装个ie浏览器插件 准备工作 安装能上外网的工具 下载插件 安装后在右上角的扩展下有ie tab 点击上面的ie tab后发现会自动下载一个ietabhelper的应用 双击应用就可以在谷歌浏览器里使用ie浏览器了 只需要在网址栏输入对应的网址就可以进去了 ...
支持ie8的拖曳排序
07-06
支持ie8的拖曳排序 ，左右两列排序
FireFox火狐浏览器与IE兼容问题 – 透明滤镜 DIV滚动条
12-11
/*FireFox（火狐）不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了，标准的是pointer 问题二：FireFox（火狐）不支持滤镜 最常见的半透明不支持。 filter: Alpha(Opacity=50); /* for IE */ opacity: ...
FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条
09-25
FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条 FireFox火狐浏览器与IE浏览器之间存在着一些兼容问题，这些问题可能会对网站的开发和维护产生影响。下面是关于FireFox火狐浏览器与IE浏览器兼容问题的总结： ...
firefox火狐浏览器与与ie兼容的2个问题总结
01-19
1：rules与cssRules... if(navigator.userAgent.indexOf(“Firefox”)>0 ) { css.insertRule(key+”{“+value+”}”, css.cssRules.length) } else { css.addRules(key,value); } } function removeCSSRule(key){ fo
IE6、IE7、IE8、Firefox兼容性CSS HACK代码及示例
12-13
1.区别IE和非IE浏览器CSS HACK代码 复制代码代码如下:#divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「...
浏览器兼容 谷歌IE8.js，IE9.js下载
01-29
浏览器兼容 谷歌IE8.js，IE9.js下载
兼容真实IE8浏览器,模拟的不起作用
05-28
兼容真实IE8浏览器,模拟的不起作用
谷歌浏览器支持IE
08-20
让谷歌浏览器也可调用IE兼容内核 老旧网站的完美解决方案
div在浏览器可见区域随意拖拽
狂野的心跳的博客
01-30 3673
实现div的随意拖拽，需要注意的就是不能拖着拖着div在浏览器里面消失了，因此需要进行位置计算（用到的数据） 1、获取浏览器可见区域宽高 browserWidth = document.documentElement.clientWidth browserHeight = document.documentElement.clientHeight 2、获取div宽高 ...
HTML5之拖拽(兼容IE和非IE)
weixin_30512043的博客
07-17 332
前世：项目中需要拖动div，然后和某个div进行位置交换，这不是关键，关键是还要保存位置，然后在下次打开的时候按照保存的位置显示。还好本人功力深厚，一下子就想到了用localStorage来保存，事实证明真的很好用哦。保存数据的方法有了，然后开始"探索"如何用html(5)和js来实现拖拽的效果，由于H5给了比较规范的实现方式，所以在Chrome中轻松实现，万恶的IE(很少骂IE)竟然不兼容，NO...
IE,谷歌浏览器的兼容性问题总结
热门推荐
Hank的博客
05-21 1万+
var oldtime = (new Date(this.props.data.create_time)).getTime()/1000; var nowtime = Date.parse(new Date())/1000; 这个时间转化在谷歌，火狐浏览器中能正确的获取到正确的数据。但是在IE浏览器却出现了问题。 打出的时间却是NAN。 NaN类型指的是一种特殊的number(但是N
CSS兼容IE和Firefox的技巧集合
10-27
这些技巧可以帮助网页设计师更好地处理CSS兼容IE和Firefox的问题，确保网站在不同浏览器上的正常显示。如果学习并掌握了这些技巧，就能够更加轻松地应对不同浏览器的兼容性问题，提高网页的用户体验。因此，对于有关...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值