JS拖拽 和 Vue - draggable 两种方法实现拖拽功能（案例二）

表格拖拽(两种实现方法)

提示：此案例是对前面案例一应用的拓展

---

---

前言

此省略！！！！！！！！！！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、原生的javascript实现拖拽效果

1.创建一个table表格

代码如下

  <!-- style为样式 -->
<style>
  table{
    margin: 0 auto;
  }
  tr,th {
    padding: 30px;
  }
  td{
    text-align: center;
  }
</style>

 <!-- 下面是table内容 -->
 <table border="0" id="myTable" border="1" >
    <thead>
      <tr>
        <th>序号</th>
        <th>书名</th>
        <th>价格</th>
        <th>库存</th>
      </tr>
    </thead>
    <tbody>
      <tr draggable="true">
        <td>1</td>
        <td>javascript进阶之路</td>
        <td>35</td>
        <td>1000</td>
      </tr>
      <tr draggable="true">
        <td>2</td>
        <td>C++是最烂的语言</td>
        <td>55</td>
        <td>44</td>
      </tr>
      <tr draggable="true">
        <td>3</td>
        <td>git可考验培训结果</td>
        <td>18</td>
        <td>42</td>
      </tr>
      <tr draggable="true">
        <td>4</td>
        <td>今年前端不好找work</td>
        <td>10</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>

效果图如下：

2.获取DOM结构(表格的结构)

代码如下：

   //获取到 tbody 和 tr 
   var tbody = document.querySelector('tbody')
   var trs = document.querySelectorAll('tr')

3.拖拽逻辑(这里使用的事件冒泡)

这里主要是用的是事件冒泡的形势，所以下面的绑定事件都是在tbody上进行的（避免了给每一个tr去绑定事件，减少了代码量，也更加容易理解）

代码如下：

 tbody.addEventListener("dragover",function(event){
        event.preventDefault()
      })
      
 tbody.addEventListener("dragstart",function(event){
        event.dataTransfer.setData("drag_index", event.target.rowIndex); 
      })
 tbody.addEventListener("drop",function(event){
        event.preventDefault()
        //1.获取传过来的被拖元素的信息
        let drag_index = parseInt(event.dataTransfer.getData("drag_index")); 
        
	    //2.当前触发drop的元素(拖拽的目标元素)，即放置目标的行下标
	    let drop_index = event.target.parentNode.rowIndex;  
	    
	    //3.这里主要是为了区分是从上向下拖拽 ｜｜ 从下向上拖拽
       if(drag_index<drop_index){
        	 //将被拖元素放到放置目标的兄弟节点上面（从上向下拖拽）
        tbody.insertBefore(trs[drag_index], event.target.parentNode.nextSibling); 
       }else{
      		 //将拖拽的元素放置在目标节点的前面
        tbody.insertBefore(trs[drag_index], event.target.parentNode);  
       } 
       		//重新获取trs 渲染页面
	     trs = myTable.querySelectorAll("tr");  
      })

效果图如下：

1.拖拽前的样式，如下图：

2.拖拽（序号1和序号2互换位置）

二、vue-draggable实现拖拽(vue2和vue3都有版本）

1.npm 安装 vue-draggable 插件(vue3)

代码如下：

npm i -S vuedraggable@next

如下图所示：

2.vue-draggable的Api

vue-draggable的api具体如下图：

第一部分的Api

第二部分的Api

3.vue-draggable的拖拽应用案例(vue3中用的官网的案例)

代码如下（👇👇下面是一个.vue的文件）：

<template>
    <!-- <input v-model='num2' /> -->
    <div class="itxst">
    <div>
        <div>123</div>
      <draggable
        :list="state.list"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
      >
        <template #item="{ element }">
            <div class="item">{{element}}</div>
        </template>
      </draggable>
    </div>
    <div>{{ state.list }}</div>
  </div>

</template>

<script setup>

import {ref,reactive} from 'vue'
import draggable from "vuedraggable";

// const num2 =ref('222')

const state = reactive({
  list: [
    { name: "JavaScript初级", id: 0 },
    { name: "React初级", id: 1 },
    { name: "Vue3+TS学习", id: 2 },
  ],
});

//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
};



</script>

<style scoped>
.itxst {
  width: 600px;
  display: flex;
margin: 0 auto;
}
.itxst > div:nth-of-type(1) {
  flex: 1;
}
.itxst > div:nth-of-type(2) {
  width: 270px;
  padding-left: 20px;
}
.item {
  border: solid 1px #eee;
  padding: 6px 10px;
  text-align: left;
}

.item:hover {
  cursor: move;
}
.item + .item {
  margin-top: 10px;
}
.ghost {
  border: solid 1px rgb(19, 41, 239);
}
.chosenClass {
  background-color: #f1f1f1;
}
</style>

效果如下图：

1.原本的样式(未拖拽)

2.id=0的选项与id=1的互换位置 （如下图所示）

---

三、vue-draggable的🔗

提示：下面是关于vue-draggable的不同vue版本的文档!!!!!!!!

vue3文档👇👇👇👇👇
Vue3 版本的vue-draggable文档

vue2文档👇👇👇👇👇
Vue2 版本的vue-draggable文档