vue-draggable實(shí)現(xiàn)pc端拖拽效果
本文實(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里面有兩個(gè)值,一個(gè)evt.added 和evt.removed ?可以分別知道移動(dòng)元素的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 //可以知道拖動(dòng)的本身 ? ? ? evt.to ? ?// 可以知道拖動(dòng)的目標(biāo)列表 ? ? ? evt.from ?// 可以知道之前的列表 ? ? ? evt.oldIndex ?// 可以知道拖動(dòng)前的位置 ? ? ? evt.newIndex ?// 可以知道拖動(dòng)后的位置 ? ? }, ? ? 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相同的組可以互相拖動(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) { ... }, // 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)添加不可拖動(dòng)的元素。重要:它應(yīng)該與可拖動(dò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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3進(jìn)階主題Composition API使用詳解
這篇文章主要為大家介紹了Vue3進(jìn)階主題Composition API使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示
這篇文章主要為大家詳細(xì)介紹了vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue移動(dòng)端html5頁面根據(jù)屏幕適配的四種解決方法
在vue移動(dòng)端h5頁面當(dāng)中,其中適配是經(jīng)常會(huì)遇到的問題,這塊主要有四個(gè)方法可以適用。這篇文章主要介紹了vue移動(dòng)端h5頁面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下2018-10-10vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)(路由守衛(wèi))
vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)(navigation-guards)。這篇文章主要介紹了vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)(路由守衛(wèi))的相關(guān)知識(shí),需要的朋友可以參考下2018-05-05elementui源碼學(xué)習(xí)仿寫el-link示例詳解
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)仿寫el-link示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12vue各種事件監(jiān)聽實(shí)例(小結(jié))
這篇文章主要介紹了vue各種事件監(jiān)聽實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06element-ui table組件如何使用render屬性的實(shí)現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11