Vue draggable實現從左到右拖拽功能

2022-04-06 13:00:15

本文範例為大家分享了Vue draggable實現從左到右拖拽功能的具體程式碼，供大家參考，具體內容如下

1、安裝外掛

npm install vuedraggable

2、在需要使用的元件中引入

import draggable from ‘vuedraggable'

3、註冊元件

components:{undefined
draggable
}

範例：

<div style="height: 1000px;">
    <div class="test-left">
      <!-- 左側按鈕 -->
      <draggable
        v-model="list1"
        draggable=".c-item"
        v-bind="dragOptionsL"
        :options="{sort: false, group: {name: 'field', pull:'clone',put: false}}"
      >
        <div v-for="(d,index) in list1" :key="index" class="item c-item">{{d.name}}</div>
      </draggable>
    </div>
    <div class="test-right">
      <!-- 右側按鈕 -->
      <draggable group="field" :list="list2" v-bind="dragOptionsR" @change="toChange">
        <div v-for="(d,k) in list2" :key="k" class="item">{{d.name}}</div>
      </draggable>
    </div>
</div>

<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
      list1: [
        { name: "11", id: 1 },
        { name: "22", id: 2 },
        { name: "33", id: 3 },
        { name: "44", id: 4 },
      ],
      list2: [
        { name: "5", id: 5 },
        { name: "6", id: 6 },
        { name: "7", id: 7 },
      ],
    };
  },
  components: {
    draggable,
  },
  computed: {
    dragOptionsL() {
      return {
        disabled: false,
        ghostClass: "ghostL", //注意：在左側上下移動時，使用這個類；移動到右側時，使用ghostR類
      };
    },
    dragOptionsR() {
      return {
        animation: 500,
        disabled: false,
        ghostClass: "ghostR", //注意：在右側上下移動時，使用這個類
      };
    },
  },
  methods: {
    toChange(e) {
      console.log(e);
      if (e.added) {
        console.log(this.list2);
      }
    }
  }
};
</script>

<style>
.test-left {
  float: left;
  width: 300px;
}
.test-right {
  float: left;
  margin-left: 20px;
  width: 300px;
}
.test-right > div {
  min-height: 80px; /*為了防止右側開始沒有內容時不可以拖動*/
}
.item {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #f2f2f2;
  margin-bottom: 12px;
}

.ghostL {
  opacity: 0.5;
  width: 230px;
}
.ghostR {
  opacity: 0;
  width: 230px;
}

注意事項：

1.左邊draggle外掛，:group="{ name: ‘dragobj’, pull: ‘clone’, put: false}"
{ name: 'dragobj’取相同名字的可以來回拖拽；pull: 'clone’從左向右克隆，後面用右邊draggle外掛的dragChangeR()方法讓左側資料隱藏了，left並不是真正的刪除這條資料；put: false 禁止從右向左拖放資料 }

2.options中的sort: false表示禁止上下拖動

3.問題：從左往右移動時，右側一直會出現items的name值，拖拽結束後，name值消失
解決方法：左右分別繫結一個v-bind=“dragOptionsL”，v-bind=“dragOptionsR”

4.問題：當右側沒有任何的items時，需要給右側v-for迴圈的父元素指定一個min-height，否則從左側拖到右側時，沒有接收的地方，則拖放失效

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Vue draggable實現從左到右拖拽功能

熱門文章