Table of Contents

案例一：

拖拽

大致思路:该实现主要由onmousedown,onmousemove,onmouseup传统拖拽方式实现,兼容ie7+,主流浏览器

html代码

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <h3>随着鼠标拖动而移动的小飞机</h3>
    <img id="p3" src="img/p3.png" alt="" />
    <script src="http://t99panzer.oss-cn-shanghai.aliyuncs.com/js/Base.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var base = new Base();
      var p3 = base.getDom("p3");
      base.moveBox(p3, p3);
//该方法有2个参数，第一个参数为容器，第二个位要拖动的元素。
    </script>
  </body>
</html>

案例二：只能在红色边框内拖动的盒子

案例二
该案例只能在红色方框内拖动，

html代码

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <h3>随着鼠标拖动而移动的小飞机</h3>
    <div id="wrap" style="width: 100px;height: 100px;border: 1px solid black;">
      <div id="box" style="width: 100px;height: 20px;border: 1px solid red;"></div>
    </div>
    <script src="http://t99panzer.oss-cn-shanghai.aliyuncs.com/js/Base.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var base = new Base();
      var wrap = base.getDom("wrap"),
        box = base.getDom("box");
      base.moveBox(wrap, box);
    </script>
  </body>
</html>

js核心代码

该方法接收2个参数，第一个为外部容器，第二个参数为要拖动的元素；第一个参数与第二个参数相同时，拖动的为鼠标拖动的元素

moveBox: function(target, ele) {
      ele.onmousedown = function(event) {
        target.style.position = "absolute"; //前提是脱离文档流，后面才能设置偏移量
        ele.style.cursor = "move";
        var event = base.getEvent(event);
        var oX = event.clientX - target.offsetLeft, //鼠标点击的位置距离面板左边的距离
          oY = event.clientY - target.offsetTop;
        document.onmousemove = function(event) { //因为这里是在document上移动的，所以需要在document上监听
          var event = base.getEvent(event);
          base.preventDefault(event); //取消图片的默认拖动事件
          var cX = event.clientX - oX, //移动后的坐标值
            cY = event.clientY - oY;
          var maxW = base.getViewPort().pageWidth - target.offsetWidth, //盒子在视口右移的最大距离
            maxH = base.getViewPort().pageHeight - target.offsetHeight;
          cX > maxW ? cX = maxW : cX; //right
          cY > maxH ? cY = maxH : cY; //bottom
          cY < 0 ? cY = 0 : cY; //top
          cX < 0 ? cX = 0 : cX; //left
          target.style.left = cX + "px";
          target.style.top = cY + "px";
        };
        document.onmouseup = function() {
          document.onmousemove = null; //删除移动事件
          document.onmouseup = null; //删除鼠标释放事件
        }
       return false;//阻止火狐浏览器的默认打开URI
      }
    }

Tags: drag, js