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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
Vue实现导出excel表格功能
Mar 30 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php事务处理实例详解
2014/07/11 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
div层的移动及性能优化
2010/11/16 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
班班通校本培训方案
2014/03/12 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
男方婚礼答谢词
2015/01/20 职场文书
机关保密工作承诺书
2015/05/04 职场文书
暑期家教宣传单
2015/07/14 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
MYSQL如何查看操作日志详解
2022/05/30 MySQL