JS 拖拽事件

 <style>
.dotted {
  width: 0px;
  height: 0px;
  background-color: none;
  border: solid 3px rgb(5, 247, 37);
  position: absolute;
  left: 0px;
  top: 0px;
  border-radius: 50%; 
}
</style>
</head>

<body>
<div class="dotted"></div>
<script>
 var dotted = document.getElementsByClassName('dotted')[0];
 var downX = 0;//判断按下鼠标时的X位置
 var downY = 0;//判断按下鼠标时的Y位置
 var on_off = false;//开关【为了先点击后移动】
 window.onmousedown = function (e) {
  on_off = true;//开，可以移动
  e = e || window.event;
  downX = e.clientX;//获取按下鼠标时的X位置
  downY = e.clientY;//获取按下鼠标时的Y位置
}
window.onmousemove = function (e) {
    e = e || window.event;
    if (on_off) {
      var moveX = e.clientX;//鼠标移动的X位置
      var moveY = e.clientY;//鼠标移动的Y位置
      var box_width = Math.abs(moveX - downX);//根据x轴位置不同求出差值设置为width
      var box_height = Math.abs(moveY - downY);//根据y轴位置不同求出差值设置为height
      var box_top = 0;
      var box_left = 0;
      //由于鼠标可能移至起点的左侧和上侧，所以取到两者的最小值
      box_left = Math.min(moveX, downX);
      box_top = Math.min(moveY, downY);
      //将数据写入样式
      dotted.style = 'top:' + box_top + 'px;left:' + box_left + 'px;width:' + box_width + 'px;height:' + box_height + 'px;'
    }
  }

window.onmouseup = function (e) {
  e = e || window.event;
  on_off = false;
}
</script>
是不是很神奇呢？
JS 拖拽事件

推荐阅读更多精彩内容
