原生js实现拖拽

实现步骤

先在元素上添加属性 <div draggable="true"></div>, 定义这个属性后就可以注册拖动的事件了
拖动事件:
开始拖动时dragstart;
进行拖动时drag;
结束拖动时dragend
拖拽区域触发事件:
拖拽元素进入区域时触发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>

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

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

<script>
    /* 拖动时事件: 开始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);
    }
</script>

原生js实现拖拽

实现步骤

推荐阅读更多精彩内容