1.安裝

npm install vuedraggable

或者使用鏡像安裝

cnpm install vuedraggable

2.使用

首先在使用的組件中引入

import draggable from 'vuedraggable'

接著在組件中注冊(cè)

components: {

draggable

}

頁面使用

v-model="dataList"

@change="change"

@start="start"

@end="end"

:move="move">

{{item.name}}

事件

methods:{

//evt里面有兩個(gè)值，一個(gè)evt.added 和evt.removed 可以分別知道移動(dòng)元素的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 //可以知道拖動(dòng)的本身

evt.to // 可以知道拖動(dòng)的目標(biāo)列表

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

evt.oldIndex // 可以知道拖動(dòng)前的位置

evt.newIndex // 可以知道拖動(dòng)后的位置

},

move (evt, originalEvent) {

console.log(evt)

console.log(originalEvent) //鼠標(biāo)位置

}

}

option屬性配置

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

sort: true, // 內(nèi)部排序列表

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

touchStartThreshold: 0, // px,在取消延遲拖動(dòng)事件之前，點(diǎn)應(yīng)該移動(dòng)多少像素?

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

store: null, // @see Store

animation: 150, // ms, 動(dòng)畫速度運(yùn)動(dòng)項(xiàng)目排序時(shí)，' 0 ' -沒有動(dòng)畫。

handle: ".my-handle", // 在列表項(xiàng)中拖動(dòng)句柄選擇器。

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

preventOnFilter: true, // 調(diào)用“event.preventDefault()”時(shí)觸發(fā)“filter”

draggable: ".item", // 指定元素中的哪些項(xiàng)應(yīng)該是可拖動(dòng)的。

ghostClass: "sortable-ghost", // 設(shè)置拖動(dòng)元素的class的占位符的類名。

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

dragClass: "sortable-drag", //拖動(dòng)元素的class。

dataIdAttr: 'data-id',

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

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

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

fallbackTolerance: 0, // 用像素指定鼠標(biāo)在被視為拖拽之前應(yīng)該移動(dòng)的距離。

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組件內(nèi)添加不可拖動(dòng)的元素。重要:它應(yīng)該與可拖動(dòng)選項(xiàng)一起使用，以標(biāo)記可拖拽元素。注意，在默認(rèn)情況下，頁腳槽將始終被添加

{{element.name}}

Add

如果項(xiàng)目報(bào)警告

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

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

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

超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。