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

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

附上上期的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. 现在的这个拖拽如果我鼠标移动的快点,你会发现这个鼠标从这个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. 我们看看现在还有什么问题,虽然拖的快的问题解决了,但是当我把鼠标移动到这个位置

现在可以明显看到鼠标不在div上,如果这个时候抬起鼠标,你可以看到回来之后它还会动。 这就又是一个bug!

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

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

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

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

其实在低版本的火狐浏览器中有这样一个问题
。怎么出现的呢,当你第一次拖的时候是对的,在拖一次的时候按住在移动,你会发现会有个这个影子在后面。这个是怎么回事呢?

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

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

所以火狐的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拖出浏览器外面,那怎么解决呢?

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

,那就直接等于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
拖拽
javascrip、javascrip综合项目、javascripit void 0、javascrip void 0、javascripe,以便于您获取更多的相关知识。

时间: 2024-10-24 10:02:22

Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧的相关文章

Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧

今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. html代码: <div id="div2"> <div id="div1"> </div> </div> css代码: <style type="text/css"> #div1 { width: 1

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

我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来也不方便.顺便提一下,我们之前加了一个return false;帮我们解决了很多问题,如果去掉这个的话,chrome也会出现一样的问题.那么也就是说这个return false;可以解决chrome ff IE9+ 这些浏览器的问题. 实际上在我们开发中,页面上会有许多的元素组成,不可能就一个div

Javascript 匀速运动停止条件——逐行分析代码,让你轻松了运动的原理

原文:Javascript 匀速运动停止条件--逐行分析代码,让你轻松了运动的原理 我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 <style type="text/css"> #div1 { width: 100px; height: 100px; position: absolute; background: red; top: 50px; left: 600px; } #div2 { width: 1px;

实例分析浏览器中“JavaScript解析器”的工作原理_javascript技巧

浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的"JavaScript解析器"开始工作. JavaScript解析器工作步骤: 1."找一些东西": var. function. 参数:(也被称之为预解析) 备注:如果遇到重名分为以下两种情况: 遇到变量和函数重名了,只留下函数 遇到函数重名了,根据代码的上下文顺序,留下最后一个 2.逐行解读代码. 备注:表达式可以修改预解析的值 JS解析器在执行第一步预解析的时候,会

Javascript 代码也可以变得优美的实现方法_javascript技巧

一.简化代码 采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小.大部分采用简单写法的代码,执行效率都有轻微提高. 1.1 简化常用对象定义:使用 var obj = {}; 代替 var obj = new Object(); 使用 var arr = []; 代替 var arr = new Array(); 1.2 精简if语句三元操作符可以有效精简只涉及赋值传值操作的if语句,比如 var score = 60, grade; if (score < 60) { grade

Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)_javascript技巧

拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位置-物体位置的差值就是那个距离 是吧.那这个斜线就是横线和竖线组成的. 我们距离看下程序怎么做. <div id="div1"> </div> 实际上他改的就是某个div 的left top ,那他就动起来了. 那样式中肯定要有绝对定位是吧. <style t

浅析JavaScript动画模拟拖拽原理_javascript技巧

模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候,x2-x1即可确定.移动鼠标之后,我们用鼠标当前的位置即x4.y4减去x2-x1.y2-y1就可以得到方块现在的位置. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页_javascript技巧

在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.

javascript 弹出窗口中是否显示地址栏的实现代码_javascript技巧

Question : 在IE 7中弹出页面后,总是会显示地址栏,而该地址栏是不希望在程序中出现的,况且也影响美观.而在IE6中就不会出现地址栏. Solution: 工具-->Internet 选项-->安全-->自定义级别-->允许网站打开没有地址栏或状态栏的窗口-->允许 这样设置了IE7后就不会在弹出窗口中出现地址栏了.IE7以及后续版本默认不可以打开不带地址栏的窗口,这样是为了安全起见. javascript的window.open也可以用来弹出新页面,而且通过设置参