通过css，js实现盒子可拖拽

关于div盒子或者其他的布局可以拖拽，我们需要用到一个属性：draggable

当draggable为true时，盒子就可以实现拖拽的样式效果，

这里我们只需要再用js控制盒子的拿起和放下就可以了

布局是这样的

 <div class="from">
        <div class="move" draggable="true" >我可以移动</div>
        <div class="mm" draggable="true" >我也可以移动</div>
    </div>

    <hr>
    
    <div class="to"></div>

这里有一个小细节，当我们把一个盒子拿出来放到另一个盒子的时候，这个盒子默认是不接受小盒子的，所以我们还要给目标盒子禁止默认事件，由于要回收站不仅要回收进去，还可以拿出来，所以这里给两个盒子都要加上禁止默认事件

---

 to.ondragover = function(target) {
        //禁用默认事件
        target.preventDefault();
 }

然后通过drop去控制拿起和放下就可以了

下面给出js代码，样式就自己写了

---

<script>
    var from = document.querySelector(".from");
    var to = document.querySelector(".to");
    var move = document.querySelector(".move");
    var mm = document.querySelector(".mm");
   



    to.ondragover = function (target) {
        //禁用默认事件
        target.preventDefault();
    }

    //drop： 放下， 松手
    to.ondrop = function () {
        
        to.appendChild(mm);
    }



    from.ondragover = function (target) {
        //禁用默认事件
        target.preventDefault();
    }

    //drop： 放下， 松手
    from.ondrop = function () {
        from.appendChild(mm);
        
    }

</script>