vue-draggable實(shí)現(xiàn)pc端拖拽效果

更新時間：2022年04月06日 11:26:26 作者：指標(biāo)滿載

這篇文章主要為大家詳細(xì)介紹了vue-draggable實(shí)現(xiàn)pc端拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue-draggable實(shí)現(xiàn)pc端拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下

為了實(shí)現(xiàn)下面這種布局可拖拽整合調(diào)整位置

拖拽前：

拖拽后：

一、安裝

npm i -S vuedraggable

二、使用

引入：

import draggable from 'vuedraggable'

注冊

components:{
? ? ? draggable
? ? },

使用

<draggable :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
? ? ? ? ? ? ? ?v-model="list2"
? ? ? ? ? ? ? ?@change="change"
? ? ? ? ? ? ? ?@start="start"
? ? ? ? ? ? ? ?@end="end"
? ? ? ? ? ? ? ?:move="move"
? ? ? ? ? ? ? ?style="display: inline-block; width:190px;height: 200px;background: #eee;overflow: auto">
? ? ? <li v-for="(item, index) in list2"
? ? ? ? ? :key="index">
? ? ? ? {{item.name}}
? ? ? </li>
</draggable>

list2:[{value:1,name:"中國"},{value:1,name:"中國"},{value:1,name:"中國"}],

事件：

//evt里面有兩個值，一個evt.added 和evt.removed ?可以分別知道移動元素的ID和刪除元素的ID
? ? change: function (evt) {
? ? ? console.log(evt)
? ? },
? ? //start ,end ,add,update, sort, remove 得到的都差不多
? ? start: function (evt) {
? ? ? console.log(evt)
? ? },
? ? end: function (evt) {
? ? ? console.log(evt)
? ? ? evt.item //可以知道拖動的本身
? ? ? evt.to ? ?// 可以知道拖動的目標(biāo)列表
? ? ? evt.from ?// 可以知道之前的列表
? ? ? evt.oldIndex ?// 可以知道拖動前的位置
? ? ? evt.newIndex ?// 可以知道拖動后的位置
? ? },
? ? move: function (evt, originalEvent) {
? ? ? console.log(evt)
? ? ? console.log(originalEvent) //鼠標(biāo)位置
? ? }

屬性

group: "name", ?// or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的組可以互相拖動
? sort: true, ?// 內(nèi)部排序列表
? delay: 0, // 以毫秒為單位定義排序何時開始。
? touchStartThreshold: 0, // px,在取消延遲拖動事件之前，點(diǎn)應(yīng)該移動多少像素?
? disabled: false, // 如果設(shè)置為真，則禁用sortable。
? store: null, ?// @see Store
? animation: 150, ?// ms, 動畫速度運(yùn)動項(xiàng)目排序時，' 0 ' -沒有動畫。
? handle: ".my-handle", ?// 在列表項(xiàng)中拖動句柄選擇器。
? filter: ".ignore-elements", ?// 不導(dǎo)致拖拽的選擇器(字符串或函數(shù))
? preventOnFilter: true, // 調(diào)用“event.preventDefault()”時觸發(fā)“filter”
? draggable: ".item", ?// 指定元素中的哪些項(xiàng)應(yīng)該是可拖動的。
? ghostClass: "sortable-ghost", ?// 設(shè)置拖動元素的class的占位符的類名。
? chosenClass: "sortable-chosen", ?// 設(shè)置被選中的元素的class
? dragClass: "sortable-drag", ?//拖動元素的class。
? dataIdAttr: 'data-id',

? forceFallback: false, ?// 忽略HTML5的DnD行為，并強(qiáng)制退出。（h5里有個屬性也是拖動，這里是為了去掉H5拖動對這個的影響）
? fallbackClass: "sortable-fallback", ?// 使用forceFallback時克隆的DOM元素的類名。
? fallbackOnBody: false, ?// 將克隆的DOM元素添加到文檔的主體中。（默認(rèn)放在被拖動元素的同級）
? fallbackTolerance: 0, // 用像素指定鼠標(biāo)在被視為拖拽之前應(yīng)該移動的距離。

? scroll: true, // or HTMLElement
? scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
? scrollSpeed: 10, // px

slot：

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

<draggable v-model="myArray" :options="{draggable:'.item'}">
? ? <div v-for="element in myArray" :key="element.id" class="item">
? ? ? ? {{element.name}}
? ? </div>
? ? <button slot="footer" @click="addPeople">Add</button>
</draggable>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: