js中好玩的案例之拖拽

学习js的过程中，相信大家都学过拖拽这个案例吧，那么怎么让拖拽变得更高级，更好玩呢，下面给大家讲一下，下图是最终实现效果。

屏幕快照 2019-10-21 下午4.20.03.png 屏幕快照 2019-10-21 下午4.20.35.png

在上面的大盒子里有三个粉色的小盒子，我们通过拖拽 ，可以把这三个小盒子拖拽到下面的大盒子中，也可以再把在下面大盒子里的小盒子拖到上面大盒子中，是不是很有趣呢？下面给大家讲解一下。

html样式

   <div class="first"></div>
     <div class="second">
    <div class="sm-box">1</div>
    <div class="sm-box">2</div>
    <div class="sm-box">3</div>
   </div>

css样式

 * {
  padding: 0;
  margin: 0;
  list-style: none;
 }
body {
background-color: #87cccc;
  }
.first,
 .second {
 width: 500px;
height: 250px;
 margin: 100px auto;
border: 1px solid #9b8888;
}
 .sm-box {
  width: 50px;
  height: 50px;
   background-color: pink;
   text-align: center;
    color: #fff;
    line-height: 50px;
   user-select: none;
  }

js样式

 // 首先我们要考虑两个大盒子的坐标位置
 var firstBox = document.querySelector('.first');
  var secondBox = document.querySelector('.second');
  // 两个大盒子的范围
  var firstRect = firstBox.getBoundingClientRect();
  var secondRect = secondBox.getBoundingClientRect();
// 所有小盒子
var smBoxs = document.querySelectorAll('.sm-box');
// 鼠标按下的坐标
var downX = 0,
downY = 0;
// 鼠标坐标距离盒子左侧、顶部的距离
var distanceX = 0;
distanceY = 0;
 // 虚拟盒子
 var virtualBox = null;
// 按下的开关
 var flag = false;
 // 当前下标
 var curIdx= 0;
for (var i = 0; i < smBoxs.length; i++) {
// 第一种方法
(function (idx) {
    smBoxs[idx].onmousedown = function (e) {
        curIdx = idx;
        // 按下的坐标
        downX = e.clientX;
        downY = e.clientY;
        // 鼠标坐标距离盒子左侧、顶部的距离
        distanceX = downX - this.offsetLeft;
        distanceY = downY - this.offsetTop;
        // 开启
        flag = true;
        // 创建一个虚拟的盒子
        virtualBox = this.cloneNode(true);
        // 设定位置
        // virtualBox.style.position = 'absolute';
        // virtualBox.style.top = this.offsetTop;
        // virtualBox.style.left = this.offsetLeft;
        // virtualBox.style.opacity = .4;
        virtualBox.style.cssText = 'position: absolute; top:' + this.offsetTop + 'px; left:' + this.offsetLeft + 'px; opacity: .4; background-color: green;';
        document.body.appendChild(virtualBox);
    }
     })(i);
   }
var moveX = 0;
moveY = 0;
  window.onmousemove = function (e) {
if (flag) {
    // 移动的光标位置
    moveX = e.clientX;
    moveY = e.clientY;
    // 盒子移动的距离
    var left = moveX - distanceX;
    var top = moveY - distanceY;

    virtualBox.style.top = top + 'px';
    virtualBox.style.left = left + 'px';
    }
 }
 window.onmouseup = function (e) {
flag = false;
// 是否处于 第一个盒子范围
if (isRange(moveX, moveY, firstRect)) {
    smBoxs[curIdx].parentNode !==firstBox && firstBox.appendChild(smBoxs[curIdx]);      
}
// 是否处于 第二个盒子范围
if (isRange(moveX, moveY, secondRect)) {
    smBoxs[curIdx].parentNode !==secondBox && secondBox.appendChild(smBoxs[curIdx]);   
}
//移除虚拟元素
virtualBox && document.body.removeChild(virtualBox);
virtualBox = null;
moveX = 0;
moveY = 0;
downX = 0,
downY = 0;
distanceX = 0;
distanceY = 0;
    }
 // 判断鼠标是否进入范围
    function isRange(x, y, range) {
    return (range.left <= x) && (range.right >= x) && (range.top <= y) &&         (range.bottom >= y) ? true : false;
}

是不是很有趣呢？感兴趣的话可以试一下，js小白，如有错误，望多指教