聊聊原生拖拽API

拖拽api是我们前端非常常见的api了，比如拖拽排序，拖拽上传文件，树形结构的生成等等都会用到拖拽api，拖拽api本身不复杂难得是在应用上，下面用一个例子来简单使用下这些api

先实现布局如下

第一步：我们需要把左侧的元素变成可拖拽的，我们可以使用html属性给元素加一个draggable属性把它设为true，该元素就可以拖拽了

    <div class="container">
      <ul class="drop-left">
        <li draggable="true">vue</li>
        <li draggable="true">react</li>
        <li draggable="true">webpack</li>
        <li draggable="true">node</li>
        <li draggable="true">js</li>
      </ul>
    </div>

html的属性只是把它变成可拖拽元素，此时只能拖拽并没有效果，所以我们的通过书写js代码自定义一系列拖拽事件，拖拽其实就是一系列事件的组合

第二步：书写js代码监控元素拖拽和拖拽事件，我们可以通过js的事件委托直接监控他们的父元素来实现监控这个区域内所有和拖拽相关的事件了

    const container = document.querySelector(".container");

    // 此事件表示拖拽开始事件，可通过e.target拿到拖拽的元素
    container.ondragstart = (e) => {
   
      console.log("start", e.target);
    };

    // 拖拽经过哪些元素上面就会触发该事件，可通过e.target知道我拖拽的元素目前在那个元素上面
    container.ondragover = (e) => {
   
      console.log("over", e.target);
    };

    // 可以通过这个事件拿到当前元素拖到了哪个元素之上
    container.ondragenter = (e) => {
   
      console.log("enter", e.target);<