vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決
更新時間：2022年05月21日 10:35:54 作者：紫菀檀ss
這篇文章主要介紹了vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決,只需要在設置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點擊事件的項不能包含在這個類名里面，不然會無法觸發(fā)點擊事件，詳細解決辦法跟隨小編一起學習吧
在實現(xiàn)一個移動端項目的時候，根據(jù)產(chǎn)品需求，要實現(xiàn)一個既能增加刪除又可以拖拽調(diào)換位置的效果，然后我使用了draggable組件，然后發(fā)現(xiàn)放到手機上的時候蘋果(ios)手機可以正常使用，但是鴻蒙系統(tǒng)的手機（例如華為pro40）有些是不可以正常拖拽、增加和刪除，只能一開始正常操作兩三個，然后后面就怎么點都沒有什么反應。通過多次嘗試和查找方法，最終找到了解決辦法，我在這里總結(jié)一下。
一、效果圖
二、拖拽及點擊無效解決方法
只需要在設置handle屬性就可以了，vuedraggable的文檔中有說明 options 配置項已經(jīng)不在使用，所以我們直接將handle單獨拿出來使用即可，像這樣:handle="'.defaultTypeTag'"，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點擊事件的項不能包含在這個類名里面，不然會無法觸發(fā)點擊事件。
三、vuedraggable的使用
這里只貼出html代碼，js相關代碼邏輯直接根據(jù)需求處理即可。
1、安裝和引入使用
// 安裝 npm install vuedraggable // 引入使用 import draggable from 'vuedraggable'
2、對應的html代碼
<draggable
class="list-group list-group-default"
tag="ul"
v-model="removetTypeList"
:handle="'.defaultTypeTag'"
v-bind="dragOptions"
@start="isDragging = true"
@update="updateDefaultTypeList"
@end="isDragging = false"
>
<transition-group type="transition" name="flip-list">
<li v-for="(v,i) in removetTypeList" :key="i">
<div class="defaultTypeTag">
<img :src="v.icon" alt="" class="img">
<p class="p">{{v.classifyName.substring(0,5)}}<span v-if="v.classifyName.length>5">...</span></p>
</div>
<i class="removeTypeList" @click.stop.prevent="handRemoveTypeChange(v,i)"></i>
</li>
</transition-group>
</draggable>到此這篇關于vue draggable組件實現(xiàn)拖拽及點擊無效問題的解決的文章就介紹到這了,更多相關vue draggable拖拽無效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
在Vue中使用SQLite數(shù)據(jù)庫的基礎應用詳解
這篇文章主要為大家詳細介紹了在Vue中使用SQLite數(shù)據(jù)庫的基礎應用,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-02-02
這篇文章主要為大家詳細介紹了Vue3響應式核心之effect的相關知識，文中的示例代碼講解詳細，對我們學習Vue3有一定的幫助，需要的可以參考一下2023-04-04
這篇文章主要為大家介紹了Vite使用Esbuild提升性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本文主要介紹了vue+element?分頁封裝的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
vue實現(xiàn)前端保持篩選條件到url并進行同步參數(shù)設計
這篇文章主要為大家介紹了vue實現(xiàn)前端保持篩選條件到url并進行同步參數(shù)設計思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
使用vue.js進行項目的開發(fā)已經(jīng)有了一定的時間，在任務的過程中以及和不同的開發(fā)使用者交流中，逐漸對vue.js的使用心得有了一定的積累。本文主要給大家分享一些開發(fā)時需要注意的事項2016-04-04
Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點
這篇文章主要介紹了Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue:Bin Code Editor格式化JSON編輯器詳解
文章介紹了BinCodeEditor組件的安裝、注冊、使用方法以及注意事項,組件可以通過npm或yarn安裝,支持全局或局部注冊,使用時,可以通過value屬性綁定JavaScript值,或使用v-model,組件事件與方法包括編輯區(qū)顯示問題的解決2024-12-12
這篇文章主要為大家介紹了Vue之組件的自定義事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細介紹了vue.js中使用mint-ui框架的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05