js drag & drop实现拖拽

1.先在元素上添加属性 <div draggable="true"></div>,定义了这个属性后就可以注册拖动的事件了

2.拖动事件:
开始拖动时dragstart;
进行拖动时drag;
结束拖动时dragend

3.拖拽区域触发事件:
拖拽元素进入区域时触发dragenter;
拖拽元素进入区域后悬停触发dragover;
拖拽元素离开区域时触发dragleave;
拖拽元素放置时触发drop

  <style>
        body{
              background: yellowgreen;
        }
        .empty{
              display: inline-block;
              margin-right: 20px;
              margin-top: 20px;
              width: 150px;
              height: 150px;
              background: #fff;
              border: 3px solid orangered;
        }
        .fill{
              background-image: url("./pi2.jpg");
              background-size: 100%;
              height: 150px;
              width: 150px;
              cursor: pointer;
        }
        .hold{
              border: 5px solid #ccc;
        }
        .holding{
              border-style: dashed;
        }
  </style>

  <div class="empty"></div>
  <div class="empty"></div>
  <div class="empty"></div>

  <div class="fill" draggable="true"></div>

`拖动时事件:   开始dragstart, 进行时drag, 结束dragend`
const fill = document.querySelector('.fill');

fill.addEventListener('dragstart',function(){
      this.className += ' hold';
      console.log(this)
      // this.className = 'invisible';      //为什么不直接设置，需要用一个定时器包裹呢？ 
      setTimeout(()=>{                      //如果直接进行设置，会发现开始拖动时, 原本的图片和拖拽在手上的图片同时消失
            this.className = 'invisible';   //dragstart开始10后，才将原本位置上的图片设置成不可见;手上拖拽的图片任然可见;
            console.log(this);
      },10)
});

fill.addEventListener('dragend',function(){
      this.className = 'fill';            //拖拽结束时, 重新给原来的fill元素节点设置 fill (有背景图片)
});


 `拖拽区域触发事件: 进入时dragenter, 进入后dragover, 离开dragleave, 放置drop`
const empties = document.querySelectorAll('.empty');   //所有的有该class的元素节点 数组
// const empty = document.querySelector('.empty');     //获取到第一个该class的元素节点


for(var i of empties){
      i.addEventListener('dragenter',dragEnter);
      i.addEventListener('dragover',dragOver);
      i.addEventListener('dragleave',dragLeave);
      i.addEventListener('drop',drop);
}

function dragEnter(){
      this.className += " holding";
}

function dragOver(e){
      e.preventDefault();
}

function dragLeave(){
      this.className = 'empty';
}

function drop(){
      //无法打印'drop', 默认情况下 拖动对象不能在某些元素中拖动,需要在dragOver时添加阻止默认事件
      // console.log('drop')  
      this.className = 'empty';
      this.append(fill);
}