vue3+原生JS拖拽

上一篇文章使用sortablejs ，实在是实现不了我的需求，所以使用原生试一下，终于实现了

原生JS的drag事件

想要拖动，需要手动开启draggable="true"

左侧代码：

 <div
     v-for="(item, index) in classTableList"
     :key="index"
     class="level1"
     :draggable="true"
     @dragstart="dragStartFn(item, index)"
     @dragenter="dragEnterFn($event, index)"
     @dragover="dragoverFn($event, index)"
     @drop="dropFn(item, index)"
     >
      <div class="firstCont">
         <el-icon v-if="item.isUse === '0'" color="#F37B1D"> <Star /> </el-icon>
         <el-icon v-if="item.isUse === '1'" color="#1E9FFF" :size="18"                    class="StarFilled"><StarFilled /> </el-icon
           ><span style="margin-left: 5px">{{ item.title }}</span>
            <span style="color: #9a9a9a; margin-right: 20px">:{{ item.description }}</span>
            <el-icon color="#9A9A9A" class="no-inherit" @click="deleteCourse(item.id)">
                <Delete />
            </el-icon>
       </div>
 </div>

// 拖动
const dragIndex = ref(0);
const enterIndex = ref(0);
const selectedRow = ref();
const draggable = ref(true);
// 该事件在用户开始拖动元素时触发
const dragStartFn = (item, index) => {
  selectedRow.value = item;
  dragIndex.value = index;
};
// ondragenter事件在拖动元素进入目标元素时触发，通常用于设置拖动时的样式。
const dragEnterFn = (e, index) => {
  e.preventDefault();
  enterIndex.value = index;
  dragIndex.value = index;
};
// ondragover事件在拖动元素在目标元素上方时触发，通常用于防止默认的拖放行为。可以通//过event.preventDefault()方法阻止默认行为。
const dragoverFn = (e, index) => {
  e.preventDefault();
};
//从外部拖拽放置到当前列表
const dropFn = (item, e, index) => {
    //执行自己的操作
};

右侧table:结合上一篇文章中 2.使用原生table/div 构造

下边是可以实现拖拽的代码

     <div id="courseName" class="sigle-col" style="width: 40%">
                  <div
                    v-for="(item, index) in tableData"
                    :key="item.id"
                    class="grid-content ep-bg-purple-light"
                    style="text-align: left"
                    :draggable="draggable"
                    @dragstart="dragStartFnTable(item, index)"
                    @dragenter="dragEnterFnTable(item, $event, index)"
                    @dragover="dragoverFnTable(item, $event, index)"
                    @dragend="dragEndFnTable(item, $event, index)"
                    @drop="dropFnTable(item, $event, index)"
                  >
                    <span style="margin-left: 10px">
                      <el-tooltip
                        :content="item.remark"
                        placement="top"
                        :disabled="item.remark !== '' ? false : true"
                      >
                        <el-icon
                          v-if="item.id !== ''"
                          :color="item.remark !== '' ? '#FF626D' : ''"
                          @click="addRemark(item)"
                          ><Document /></el-icon
                      ></el-tooltip>

                      <el-icon v-if="item.courseType === '0'"> <Star /> </el-icon
                      ><el-icon v-if="item.courseType === '1'"><Aim /></el-icon
                      >{{ item.courseName }}</span
                    >
                  </div>
                </div>

// Table表格中
// 该事件在用户开始拖动元素时触发
const startItem = ref();
const endItem = ref();
const startIndex = ref();
const endIndex = ref();
const dragStartFnTable = (item, index) => {
  startItem.value = item;
  startIndex.value = index;
};
// 该事件在拖动的元素进入放置目标时触发
const dragEnterFnTable = (item, e, index) => {
  e.preventDefault();
  enterIndex.value = index;
};
// 该事件在拖动元素在放置目标上时触发
const dragoverFnTable = (item, e, index) => {
  e.preventDefault();
  endItem.value = item;
  endIndex.value = index;
  if (endIndex.value === startIndex.value) {
    draggable.value = false;
  } //前后拖拽位置一样，不进行操作
};
// 表格内拖拽结束
const dragEndFnTable = (item, e, index) => {
  e.preventDefault();
   //执行自己的操作
  draggable.value = true;
};
//从外部拖拽放置后的操作
const dropFnTable = (item, e, index) => {
  e.preventDefault();
    //执行自己的操作
  selectedRow.value = {};
};

实现效果：

参考文档：https://blog.csdn.net/Hypocriteee/article/details/131754499