js实现拖拽

作者: Bookish倩宝 | 来源:发表于2016-09-30 23:15 被阅读0次

原生js实现拖拽（碰撞检测）
拖拽
js拖拽html元素工具类
js实现拖拽
实现拖拽
JS实现拖拽
js实现拖拽
Vue.Draggable学习总结
JS 实现拖拽之 - 列表拖拽
js实现元素拖拽

①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离

js实现

① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()
③ ……

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    #box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
    #main{border:1px solid #a0b3d6; background:white;}
    #bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
    #content{width:420px; height:250px; padding:10px 5px;}
  </style>
</head>
<body>
  <div id="box">
      <div id="main">
          <div id="bar">拖拽</div>
          <div id="content">
              内容……
          </div>
      </div>
  </div>
</body>
<script type="text/javascript">
  var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
  };
  //获取相关CSS属性
  var getCss = function(o,key){
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
  };
  //拖拽的实现
  var startDrag = function(bar, target, callback){
    if(getCss(target, "left") !== "auto"){
    params.left = getCss(target, "left");
    }
    if(getCss(target, "top") !== "auto"){
    params.top = getCss(target, "top");
    }
    //o是移动对象
    bar.onmousedown = function(event){
      params.flag = true;
      if(!event){
        event = window.event;
        //防止IE文字选中
        bar.onselectstart = function(){
          return false;
        }
      }
      var e = event;
      params.currentX = e.clientX;
      params.currentY = e.clientY;
    };
    document.onmouseup = function(){
      params.flag = false;
      if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
      }
      if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
      }
    };
    document.onmousemove = function(event){
      var e = event ? event: window.event;
      if(params.flag){
        var nowX = e.clientX, nowY = e.clientY;
        var disX = nowX - params.currentX, disY = nowY - params.currentY;
        target.style.left = parseInt(params.left) + disX + "px";
        target.style.top = parseInt(params.top) + disY + "px";
      }

      if (typeof callback == "function") {
        callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
      }
    }
  };
  var oBox = document.getElementById("box");
  var oBar = document.getElementById("bar");
  startDrag(oBar, oBox);
</script>
</html>