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 相关文章推荐
jquery 面包屑导航 具体实现
Jun 05 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
JS将unicode码转中文方法
May 08 Javascript
webpack多页面开发实践
Dec 18 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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的一个简单加密解密代码
2014/01/14 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
js如何打印object对象
2015/10/16 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Python数据类型之Set集合实例详解
2019/05/07 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python turtle 绘制太极图的实例
2019/12/18 Python
解决Python使用列表副本的问题
2019/12/19 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
2014学年自我鉴定
2014/02/23 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
工作收入住址证明
2014/10/28 职场文书
党员个人年度总结
2015/02/14 职场文书
公安机关起诉意见书
2015/05/20 职场文书
公司庆典主持词
2015/07/04 职场文书
求职自我评价参考范文
2019/05/16 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript