Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)


Posted in Javascript onJanuary 23, 2015

今天我们就来解决上一次拖拽雏形中的一些问题。下面看看有哪些问题?

附上上期的Javascript代码,方便大家查看问题。

<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;

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

    };

   };
  </script>

1. 现在的这个拖拽如果我鼠标移动的快点,Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)你会发现这个鼠标从这个div出来了,这个时候div不会跟着鼠标走了。

那为什么会出现这个问题呢?

原因其实很简单,mousemove的事件我们是给div加的,所以鼠标一旦脱离了这个div,那么这个时候mousemove已经不触发了。

解决方案: 事件加载document 上,因为你鼠标无论如何都还在页面里面,怎么样都会触发mousemove 这样移动的在快也没问题。

那么我们相应的修改下代码。

<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;
    // 事件加载document 上
     document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px';
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     oDiv.onmouseup = function() {
      document.onmousemove = null;
      oDiv.onmouseup = null; 
     };

    };

   };
  </script>

那么这个问题就可以解决了。

2. 我们看看现在还有什么问题,虽然拖的快的问题解决了,但是当我把鼠标移动到这个位置

Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)

现在可以明显看到鼠标不在div上,如果这个时候抬起鼠标,你可以看到回来之后它还会动。Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理) 这就又是一个bug!

其实这个问题和上面的是一样的。所以呢解决起来也很简单我们把mouseup也加到document上,我们来试一下看看

document.onmouseup = function() { 
      document.onmousemove = null; 
      document.onmouseup = null; 
     };

这样 现在如果在移动到刚才的那个位置,就不会在出现之前的bug了,并且移动的快也没有任何的问题。一切都很正常。

3. 我们看看浏览器兼容的问题

其实在低版本的火狐浏览器中有这样一个问题
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)。怎么出现的呢,当你第一次拖的时候是对的,在拖一次的时候按住在移动,你会发现会有个这个影子在后面。这个是怎么回事呢?

实际上来说我们现在拖动的是一个空的div火狐是有bug的,那么如果在div中加点内容呢

Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)

你会发现现在又没有问题了。

所以火狐的bug就只有在空div中出现的。

解决方案:

其实很简单,我们就只要阻止浏览器默认事件就可以了 return false; 在onmousedown中。 为什么要加在onmousedown中呢?

大家可以想一下,拖拽是从哪个事件开始的,是从onmousedown开始的吧,当鼠标按下的时候拖拽就开始了。所以要加载onmousedown中。

实际上就是加了一句return false; 把火狐的bug屏蔽掉了。

这样不管怎么拖就没有问题了。

附上代码:

<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;
     // 事件加载document 上
     document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX+'px';
      oDiv.style.top = oEvent.clientY - disY+'px';
     };
     document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
     };

     return false;

    };

   };
  </script>

现在程序是完整了,但是在用户体验上还有一些问题。

比如说用户可能会把这个div拖出浏览器外面,那怎么解决呢?

那我们就在加个判断呗。 这个很简单吧,如果从左边出去了

Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)

,那就直接等于0,他就从左边出不去了。那么上边也是一样的。

那么怎么防止不能从右边出去?? 画个图就清楚了。 其实我们只要把页面的可视取的宽度减掉div的宽度就能算出来了。

那这个就是所谓的最大值,判断一下如果移动的距离超过了这个最大值就等于这个最大值即可。那么下边是一样的。

附上完整代码:

<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;

          document.onmousemove = function(ev) {
            var oEvent = ev || event;
            // 存储div当前的位置
            var oDivLeft = oEvent.clientX - disX;
            var oDivTop = oEvent.clientY - disY;


            // 从左边拖出去了
            if (oDivLeft < 0) {
              oDivLeft = 0;
            } else if (oDivLeft > document.documentElement.clientWidth - oDiv.offsetWidth) {
              oDivLeft = document.documentElement.clientWidth - oDiv.offsetWidth;
            }

            if (oDivTop < 0) {
              oDivTop = 0;
            } else if (oDivTop > document.documentElement.clientHeight - oDiv.offsetHeight) {
              oDivTop = document.documentElement.clientHeight - oDiv.offsetHeight;
            }

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

          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
          return false; // 阻止默认事件,解决火狐的bug
        };
      };
    </script>

那么现在这个拖拽就比较完整啦。O(∩_∩)O

Javascript 相关文章推荐
jQuery的强大选择器小结
Dec 27 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
Java File类的常用方法总结
Mar 18 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 #Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
jQuery选择器querySelector的使用指南
Jan 23 #Javascript
jQuery中DOM操作实例分析
Jan 23 #Javascript
jquery实现点击页面计算点击次数
Jan 23 #Javascript
You might like
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
javascript中Object使用详解
2015/01/26 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
python的多重继承的理解
2017/08/06 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
大学生自荐信范文
2015/03/05 职场文书
城南旧事读书笔记
2015/06/29 职场文书
女儿满月酒致辞
2015/07/29 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android