js跨浏览器实现传统拖拽效果,兼容ie7+

2018-1-8 23:33:43 2,420 views

 

案例一:

拖拽


大致思路:该实现主要由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
      }
    }

 
 

0

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。