vue插件 vuedraggable 實戰項目 圖片拖拽 功能

---

在vue項目裏面需要用到圖片拖拽功能，把圖片從左邊拖到右邊，從右邊拖到左邊，這要怎麼弄？

用elementui好像很難搞，手寫效率低，容易出bug，去百度搜索一下有個插件 vuedraggable，圖片拖拽插件 ！沒用過，經過十幾分的倒騰，測試成功！

---

結構目錄：

• index.vue 和 img 文件夾同級，img 裏面是6張圖片
  

正式開始

---

• 安裝 插件

	 npm install vuedraggable --save

---

• 使用 vuedraggable 插件：

在安裝完後 在要用的頁面 script 標籤裏面引入，同時在 components 裏面也要引入 draggable

<script>
	 import draggable from "vuedraggable" // 直接在這裏引入就行了
	 export default {
	  components: { draggable }, // 在這裏也要引入 draggable 
	}
</script>

---

• 先欣賞一下效果圖，最後上代碼

---

• 整個頁面代碼 (前提：你需要弄到6張圖片，放在img 裏面，改圖片的名稱和代碼中一樣 ，圖片路徑問題，懂得也不用多說，就是引入圖片)
• 整體思路就是從後臺請求到圖片的responseList1賦值給list1，responseList2賦值給list2 ；把圖片從左邊拖到右邊後把list1、list2的值 都發送給後臺。

<template>
  <div>
    <h1>拖拽</h1>
    <div class="box">
      <draggable class="list-group" :list="list1" :group="{name:'people'}" :clone="clone">
        <div class="list-group-item" v-for="(element, index) in list1" :key="index+'b'">
          <img :src="element.name" style="width:100px;height:60px" :alt="element.id" />
        </div>
      </draggable>

      <draggable class="list-group" :list="list2" :group="{name:'people'}" :clone="clone">
        <div class="list-group-item" v-for="(element, index) in list2" :key="index+'a'">
          <img :src="element.name" style="width:100px;height:60px" :alt="element.id" />
        </div>
      </draggable>
    </div>
    <br />
    {{list1}}
    <hr />
    {{list2}}
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: { draggable },
  data() {
    return {
      list1: [ // 左邊圖片
        {
          name: require("./img/1.jpg"),
          id: 1
        },
        {
          name: require("./img/2.jpg"),
          id: 2
        },
        {
          name: require("./img/3.jpg"),
          id: 3
        }
      ],
      list2: [ // 右邊圖片
        {
          name: require("./img/4.jpg"),
          id: 4
        },
        {
          name: require("./img/5.jpg"),
          id: 5
        },
        {
          name: require("./img/6.jpg"),
          id: 6
        }
      ]
    };
  },
  methods: {
    clone(el) {
      console.log("clone", el); // 拖動哪個圖片，就先打印哪個圖片的信息
      return {
        name: el.name
      };
    }
  }
};
</script>

<style  scoped>
.box {
  display: flex;
}
.list-group {
  flex: 1;
}
</style>

---