工作篇-在PC端使用拖拽功能+（上移、下移+删除）数组操作记录

注一：本方案结合了vue+iview
注二：ondragstart 事件（菜鸟教程：https://www.runoob.com/jsref/event-ondragstart.html）
1、定义和用法
ondragstart 事件在用户开始拖动元素或选择的文本时触发。
注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。
提示： 链接和图片默认是可拖动的，不需要 draggable 属性。

2、在拖放的过程中会触发以下事件：

2.1、在拖动目标上触发事件 (源元素):
（1）、ondragstart - 用户开始拖动元素时触发
（2）、ondrag - 元素正在拖动时触发
（3）、ondragend - 用户完成元素拖动后触发

2.2、释放目标时触发的事件:
（1）、ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
（2）、ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
（3）、ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
（4）、ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

一、HTML结构
 <!-- 1、一级分类部分（总数据）-->
    <div class="mb10 mian">
      <ul
        class="dragButton"
        style="width: 80px"
      >
        <li style="text-align: center">菜城一级分类(可拖入产品线)</li>
      </ul>
     <!-- deleteDrop事件，是从表格拖出，到此时，释放鼠标键时触发此事件，主要是为了删除从表格拖拽出的数据 -->
     <!--  dragover.prevent 设置可拖拽-->
      <ul
        class="ml10 dragButton dragLi"
        style="width: 90%"