技術標籤：前端vue.js

1.安裝元件

npm install vuedraggable -S
2.引入元件

完整程式碼：helloWorld.vue

<template>
  <div class="hello">
    <el-button @click="getData()">載入資料</el-button>
    <table class="dataTabble" v-for="(item,id) in tableData" :key="id">
      <thead>
      <tr>
        <th width="80">序號</th>
        <th width="200">地址</th>
      </tr>
      </thead>
      <draggable v-model="item.orders" element="tbody" @update="datadragEnd">
        <tr v-for="(val,index) in item.orders" :key="index">
          <td>{{val.num}}</td>
          <td>{{val.address}}</td>
        </tr>
      </draggable>
    </table>
  </div>
</template>

<script>
  import draggable from "vuedraggable";
export default {
  name: 'HelloWorld',
  components: {
    draggable,
  },
  data() {
    return {
      activeNames:[0],
      tableData:[],
    }
  },
  methods:{
    getData(){
      this.tableData = [
        {
          lable:'title1',
          orders:[
            {num:1,address:'上海市'},
            {num:2,address:'北京市'},
            {num:3,address:'深圳市'}
          ]
        },
        {
          lable:'title2',
          orders:[
            {num:4,address:'河南省'},
            {num:5,address:'鄭州市'},
            {num:6,address:'天安門'},
            {num:7,address:'南京市'}
          ]
        }
      ];
    },
    datadragEnd(e) {
      console.log("拖動前的索引 :" + e.oldIndex);
      console.log("拖動後的索引 :" + e.newIndex);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>