vuedraggable 手冊

vuedraggable 是一個基於Vue框架的拖拽組件。

目前被廣泛用於活動布局

import draggable from 'vuedraggable';

屬性：

draggable <example> draggable=".item" 里的.item 指的是可以drag的class選擇器

v-model <example> v-model="myArray" 傳入drag里組件或ele綁定的數據

tag <example> tag="ul" 綁定<draggable>標簽為新的標簽 該實例為<ul></ul>

:list <example> :list="listArr" 和 v-model原理類似 將數據傳入組件 listArr可以在drag里可渲染

handle <example> handle=".handleclass"  選擇可拖拽的ele  在.handleclass 這個選擇器下的ele可以拖拽

v-bind 綁定一個屬性是可以的 可以綁定一個 dragOptions這個dragOptions是個computed 可以綁定drag的屬性 <example> animation: 200, group: "description", disabled: false, ghostClass: "ghost" 或者 通過 :other="other"同樣可以綁定屬性但是這樣綁定方法不可綁定到dragOptions里 讓dragOptions生效

animation動畫可單獨放入 :animation="100"

group 可將多個draggable分組 <example> 當group="a"時 所有組名一樣的可以互拖

方法

@start="method" 當開始移動時觸發method並返回event含開始位置信息等等

@end="method" 當結束移動時觸發method並返回event含開始和結束位置信息等等

插槽

slot="header" 從頂部插入一個內容

slot="footer" 從底部插入一個內容

 

dragOptions() {

      return {

        animation: 200,

        group: "description",

        disabled: false,

        ghostClass: "ghost"

      };

    },

 

<draggable v-model="myArray" draggable=".item">

    <div v-for="element in myArray" :key="element.id" class="item">

        {{element.name}}

    </div>

    <button slot="header" @click="addPeople">Add</button>

</draggable>