1.安裝

npm install vuedraggable

或者使用鏡像安裝

cnpm install vuedraggable

2.使用

首先在使用的組件中引入

import draggable from 'vuedraggable'

接著在組件中注冊

components: {

draggable

}

頁面使用

v-model="dataList"

@change="change"

@start="start"

@end="end"

:move="move">

{{item.name}}

事件

methods:{

//evt里面有兩個值，一個evt.added 和evt.removed 可以分別知道移動元素的ID和刪除元素的ID

change (evt) {

console.log(evt)

},

//start ,end ,add,update, sort, remove 得到的都差不多

start (evt) {

console.log(evt)

},

end (evt) {

console.log(evt)

evt.item //可以知道拖動的本身

evt.to // 可以知道拖動的目標列表

evt.from // 可以知道之前的列表

evt.oldIndex // 可以知道拖動前的位置

evt.newIndex // 可以知道拖動后的位置

},

move (evt, originalEvent) {

console.log(evt)

console.log(originalEvent) //鼠標位置

}

}

option屬性配置

group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的組可以互相拖動

sort: true, // 內部排序列表

delay: 0, // 以毫秒為單位定義排序何時開始。

touchStartThreshold: 0, // px,在取消延遲拖動事件之前，點應該移動多少像素?

disabled: false, // 如果設置為真，則禁用sortable。

store: null, // @see Store

animation: 150, // ms, 動畫速度運動項目排序時，' 0 ' -沒有動畫。

handle: ".my-handle", // 在列表項中拖動句柄選擇器。

filter: ".ignore-elements", // 不導致拖拽的選擇器(字符串或函數)

preventOnFilter: true, // 調用“event.preventDefault()”時觸發“filter”

draggable: ".item", // 指定元素中的哪些項應該是可拖動的。

ghostClass: "sortable-ghost", // 設置拖動元素的class的占位符的類名。

chosenClass: "sortable-chosen", // 設置被選中的元素的class

dragClass: "sortable-drag", //拖動元素的class。

dataIdAttr: 'data-id',

forceFallback: false, // 忽略HTML5的DnD行為，并強制退出。(h5里有個屬性也是拖動，這里是為了去掉H5拖動對這個的影響)

fallbackClass: "sortable-fallback", // 使用forceFallback時克隆的DOM元素的類名。

fallbackOnBody: false, // 將克隆的DOM元素添加到文檔的主體中。(默認放在被拖動元素的同級)

fallbackTolerance: 0, // 用像素指定鼠標在被視為拖拽之前應該移動的距離。

scroll: true, // or HTMLElement

scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }

scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.

scrollSpeed: 10, // px

slot

使用footer插槽在vuedraggable組件內添加不可拖動的元素。重要:它應該與可拖動選項一起使用，以標記可拖拽元素。注意，在默認情況下，頁腳槽將始終被添加

{{element.name}}

Add

如果項目報警告

vue Do not use v-for index as key on children, this is the same as not using keys

報錯的意思是：在子元素上，不要使用v-for索引作為鍵，否則與不使用鍵相同

解決辦法： 把你列表循環 :key=“index” index可以換成 id 或者 給Index 隨便加個數字 :key="item.id" 或者 :key="index + 10"

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的vuedraggable自由拖拽html,vue中draggable拖拽列表的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。