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初学者的编写开发的七个细节
Jan 11 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
Stop SQL Server
2007/06/21 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
input 高级限制级用法
2009/03/26 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
Python的lambda匿名函数的简单介绍
2013/04/25 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python+django实现文件上传
2016/01/17 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2014年班主任工作总结
2014/11/08 职场文书
同学会邀请函模板
2015/01/30 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS