程序员人生 网站导航

Javascript 拖拽的一些高级的应用――逐行分析代码,让你轻松了拖拽的原理

栏目:htmlcss时间:2015-01-22 08:17:51

我们看看之前的拖拽在周围有东西的时候会出现甚么问题? 在高级阅读器中不会有啥问题,我们放到IE7下面测试1下,问题就出来了。如图

imageimage

我们可以很清楚的看到,文字都已被选中了。那这个用户体验很不好,用起来也不方便。顺便提1下,我们之前加了1个return false;帮我们解决了很多问题,如果去掉这个的话,chrome也会出现1样的问题。那末也就是说这个return false;可以解决chrome ff IE9+ 这些阅读器的问题。

实际上在我们开发中,页面上会有许多的元素组成,不可能就1个div,在你拖动的时候其他地方是不会被选中的,比如说百度地图,大家可以玩玩。
那我们如何做到这模样的1个拖拽呢?能够解决IE7的问题呢?

解决方案:

我们可以用1个小技能来解决,这个技能只有在IE6⑻支持,实际上就可以解决我们的问题,由于其他的阅读器用return false; 就够了。下面看看是甚么技能

就是事件捕获!! 简单说明下 附上代码

复制代码
<title></title>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                oBtn.onclick=function(){
                    alert(1);
                };

                // 网页上所有地方的上的事件都集中到1个按钮身上 IE 专用
                oBtn.setCapture(); // 点击哪里都是弹a
            }
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="按钮" />
    </body>
复制代码

实际上就是页面上所有地方上的事件都集中到1点,点击页面任何位置都会弹出a,也就是setCapture()作用。

把所有事件都集中到1个按钮来处理!! 这个就只有IE兼容!!

这样,让我来看看如何修改之前的代码。。。。

我们首先把所有的document改回div,记不记得我们之前讲过由于鼠标拖动的快点就容易拖出div,所以把事件都加在document上。

而现在就没必要这样做了,给我们之前的div加上1个setCapture()看看效果。

复制代码
<body>
        IE 7 中的文字会被选中 ,
        <br />如果不加return false chrome ff 也会有这样的问题 asdsadad
        <br />
        <div id="div1">
            asdsadad asdsadad asdsadad
        </div>
        asdsadadasdsadadasdsadad
    </body>
复制代码
复制代码
<style type="text/css">
            #div1 {
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;
            }
        </style>
复制代码
复制代码
<script type="text/javascript">
         // 拖拽空div 低版本的火狐有bug
      window.onload = function() {
        var oDiv = document.getElementById("div1");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;
          oDiv.onmousemove = function(ev) {
            var oEvent = ev || event;
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          oDiv.onmouseup = function() {
            oDiv.onmousemove = null;
            oDiv.onmouseup = null;
          };
          oDiv.setCapture();
          return false; // 禁止默许事件,解决火狐的bug
        };
      };
    </script>
复制代码

这个时候实际上我们拖动在快也不会出现鼠标拖出Div的问题了。 实际上加了setCapture()以后,全部网页上所有的事件都集聚集在这1个div上面。

其实现在,这个文字就不会被选中了。为何呢? 由于现在网页上的文字,图片的所有事件都在div上了,他们已得不到事件了!所以自然他们就不会被选中了。

固然现在又有个问题????你会发现当你要试图去选中那些文字的时候,就选不中了。image

如何是好,事件都集中在div上了。。。!!!!!

所以呢,其实这个setCapture()就像1把锁,现在都锁住了,事件都在div上面,现在解锁就能够了 那相对应的就有 releaseCapture();

releaseCapture(); 就是释放捕获。 实际上在鼠标抬起的时候加上就能够了。

复制代码
window.onload = function() {
        var oDiv = document.getElementById("div1");
        var disX = 0;
        var disY = 0;
        oDiv.onmousedown = function(ev) {
          var oEvent = ev || event;
          disX = oEvent.clientX - oDiv.offsetLeft;
          disY = oEvent.clientY - oDiv.offsetTop;
          oDiv.onmousemove = function(ev) {
            var oEvent = ev || event;
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;

            oDiv.style.left = oDivLeft + 'px';
            oDiv.style.top = oDivTop + 'px';
          };

          oDiv.onmouseup = function() {
            oDiv.onmousemove = null;
            oDiv.onmouseup = null;
            oDiv.releaseCapture();
          };
          oDiv.setCapture();
          return false; // 禁止默许事件,解决火狐的bug
        };
      };
复制代码

现在就可以解决文字选中的问题了。 最后我们坐下兼容,实际上来讲这个setCapture() 是不兼容的,放在其他阅读器就错了。

那末很简单, 我们只要合并这次与上1次的代码就能够了,兼容嘛 做个if判断就好。最后附上整理好的代码

复制代码
<script type="text/javascript">
            window.onload = function() {
                var oDiv = document.getElementById("div1");
                var disX = 0;
                var disY = 0;
                oDiv.onmousedown = function(ev) {
                    var oEvent = ev || event;
                    disX = oEvent.clientX - oDiv.offsetLeft;
                    disY = oEvent.clientY - oDiv.offsetTop;

                    if (oDiv.setCapture) {
                        oDiv.onmousemove = mouseMove;

                        oDiv.onmouseup = mouseUp;

                        oDiv.setCapture(); // IE 7 下文字就不会被选中 其实就是文字或图片得不到事件
                    } else {
                        document.onmousemove = mouseMove;
                        document.onmouseup = mouseUp;
                    }

                    function mouseMove(ev) {
                        var oEvent = ev || event;
                        var oDivLeft = oEvent.clientX - disX;
                        var oDivTop = oEvent.clientY - disY;
                        oDiv.style.left = oDivLeft + 'px';
                        oDiv.style.top = oDivTop + 'px';
                    }

                    function mouseUp(ev) {
                        this.onmousemove = null;
                        this.onmouseup = null;
                        if (oDiv.releaseCapture) {
                            oDiv.releaseCapture(); // 释放捕获
                        }
                    }
                    return false; // 禁止默许事件,解决火狐的bug
                };
            };
        </script>
复制代码

好了,都弄定了 O(∩_∩)O哈哈~

其他精彩文章

jQuery教程(19)-jquery ajax操作之序列化表单

jQuery教程(18)-ajax操作之履行POST要求

jQuery教程(20)-jquery ajax + php 操作之为Ajax要求提供不同...

jQuery教程(21)-jquery ajax 回调函数

jQuery教程(22)-ajax操作之毛病处理

jQuery教程(24)-ajax操作之Ajax和事件

更多关于android开发文章


------分隔线----------------------------
------分隔线----------------------------

最新技术推荐