JS 拖拽问题

56 阅读 0 评论 37 点赞

我是靠谱客的博主淡定蜻蜓，最近开发中收集的这篇文章主要介绍JS 拖拽问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

分三步

1.按住鼠标不放绑定一个响应函数 onmousedowm

2.按住鼠标移动的过程绑定一个响应函数 onmousemove

3.松开鼠标绑定一个响应函数 onmouseup

注意点：1.第二步和第三步需要嵌套在第一步内
2.在松开鼠标的时候需要对第二步和第三步进行一个释放

              document.onmousemove = null;
              //要把松开事件这个事件本身关闭
              document.onmouseup = null;

3 . onmousemove和onmouseup 都是绑定document ，这样才能在整个页面移动.
4.当浏览器拖拽网页的时候，浏览器会搜索引擎里面的内容，这是浏览器的默认行为会影响浏览器的拖拽行为。
利用retrun false

例子

 <style>
      #box1 {
        width: 100px;
        height: 100px;
        background-color: blue;
        /* 重新设置坐标的盒子必须给盒子加定位 */
        position: absolute;
      }
      #box2 {
        width: 200px;
        height: 100px;
        background-color: blueviolet;
        left: 300px;
        position: relative;
      }
    </style>
    <script>
      window.onload = function () {
        var box2 = document.getElementById("box2");
        var box1 = document.getElementById("box1");
        drag(box2);
        drag(box1);
        function drag(obj) {
          /* 
         事件拖拽分为三步走
         1-按住鼠标不放 onmousedown
         2-移动鼠标，目标获取鼠标的坐标
         3-松开鼠标的时，目标固定在当前位置
        */

          //按住鼠标不放，即开始拖拽
          obj.onmousedown = function (event) {
            //兼容ie8
            /* if(obj.setCapture) {
                obj.setCapture;
            }
            */
            var lf = event.clientX - obj.offsetLeft;
            var ot = event.clientY - obj.offsetTop;

            // 移动鼠标 获取鼠标的坐标赋给对象
            document.onmousemove = function (event) {
              event = event || window.event;
              var left = event.clientX - lf;
              var top = event.clientY - ot;
              //把坐标赋给box1
              obj.style.left = left + "px";
              obj.style.top = top + "px";
            };
            //松开鼠标的时候，把对象固定在当前鼠标的位置
            document.onmouseup = function () {
              document.onmousemove = null;
              //要把松开事件这个事件本身关闭
              document.onmouseup = null;
            };
            /*  if( obj.releaseCapture) {
                obj.releaseCapture
              } */

            /* 
              当浏览器拖拽网页的时候，浏览器会搜索引擎里面的内容，这是浏览器的默认行为
              会影响浏览器的拖拽行为
              */
            //这里对ie8及以下版本不管用
            return false;
          };
        }
      };
    </script>
  </head>
  <body>
    这是一段文字
    <div id="box1"></div>

    <div id="box2"></div>
  </body>