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


Posted in Javascript onJanuary 23, 2015

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

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

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

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

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

解决方案:

我们可以用一个小技巧来解决,这个技巧只有在IE6-8支持,实际上就能解决我们的问题,因为其他的浏览器用return false; 就够了。下面看看是什么技巧

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

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

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

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

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

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

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

而现在就不必这样做了,给我们之前的div加上一个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()以后,整个网页上所有的事件都会聚集在这一个div上面。

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

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

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

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

所以呢,其实这个setCapture()就像一把锁,现在都锁住了,事件都在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() 是不兼容的,放在其他浏览器就错了。

那么很简单, 我们只要合并这次与上一次的代码就可以了,兼容嘛 做个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哈哈~

Javascript 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
jQuery选择器querySelector的使用指南
Jan 23 #Javascript
jQuery中DOM操作实例分析
Jan 23 #Javascript
jquery实现点击页面计算点击次数
Jan 23 #Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 #Javascript
PHP实现的各种中文编码转换类分享
Jan 23 #Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 #Javascript
PHPExcel中的一些常用方法汇总
Jan 23 #Javascript
You might like
mysql建立外键
2006/11/25 PHP
php开发工具之vs2005图解
2008/01/12 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python的等深分箱实例
2019/11/22 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
学生打架检讨书
2014/02/14 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
学习教师法的心得体会
2014/09/03 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
Mysql中mvcc各场景理解应用
2022/08/05 MySQL
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers