实现h5的拖放盒子的功能并且交换元素的位置

• html 页面

<div class="box" draggable="true">1</div>
    <div class="box box1" draggable="true">2</div>
    <div class="box box2" draggable="true">3</div>
    <div class="box box3" draggable="true">4</div>
       

• css样式

 .box {
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px 40px!important;
            border: 10px solid #ccc;
            border-image: linear-gradient(red,yellow) 20 10;
        }
        .box1 {
            width: 200px;
            height: 200px;
            margin: 20px auto;
            border: 10px solid #ccc;
            border-image: linear-gradient(to top left,red,rgba(0,0,0,0)) 20 10;
        }
        .box2 {
            width: 200px;
            height: 200px;
            margin: 20px auto;
            border: 10px solid #ccc;
            border-image: linear-gradient(90deg,red,yellow) 20 10;
        }
        .box3{
            width: 200px;
            height: 200px;
            margin: 20px auto;
            border: 10px solid #ccc;
            border-image: linear-gradient(135deg,red,yellow) 20 10;
        }

• 监听拖放事件

 		let currEl = null
        document.addEventListener('dragstart',function() {
            console.log("目标开始拖动");
            currEl = event.target
            event.target.style.opacity = 0.2
        })
        document.addEventListener('dragend',function(event) {
            console.log("拖动结束");
            console.log(event.target);
            event.target.style.opacity = ''
        })
        document.addEventListener("dragover",function(e) {
            e.preventDefault()
            console.log("拖动元素经过目标元素");
            console.log(e.target);
        })
        document.addEventListener('dragenter',function(event) {
            console.log('拖动元素进入目标元素')
            console.log(event.target);
        })
        document.addEventListener('drop',function(event) {
            console.log("拖动元素放到目标元素");
            turn(currEl,event.target)
        })
        document.addEventListener('dragleave',function(event) {
            console.log("拖动元素离开");
            console.log(event.target);
        })

• 交换元素位置

 function turn(el1,el2) {
      let parentNode = el1.parentNode
         sibling1 = el1.nextElementSibling
         sibling2 = el2.nextElementSibling
         if(sibling1 == el2) {
             parentNode.insertBefore(el2,el1)
         }else if(sibling2 == el1) {
             parentNode.insertBefore(el1,el2)
         }else {
             parentNode.insertBefore(el1,sibling2)
             parentNode.insertBefore(el2,sibling1)
         }
         
     }