快捷導(dǎo)航

vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決

更新時間：2022年05月21日 10:35:54 作者：紫菀檀ss

這篇文章主要介紹了vue?draggable組件實現(xiàn)拖拽及點擊無效問題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點擊事件的項不能包含在這個類名里面，不然會無法觸發(fā)點擊事件，詳細(xì)解決辦法跟隨小編一起學(xué)習(xí)吧

在實現(xiàn)一個移動端項目的時候，根據(jù)產(chǎn)品需求，要實現(xiàn)一個既能增加刪除又可以拖拽調(diào)換位置的效果，然后我使用了draggable組件，然后發(fā)現(xiàn)放到手機(jī)上的時候蘋果(ios)手機(jī)可以正常使用，但是鴻蒙系統(tǒng)的手機(jī)（例如華為pro40）有些是不可以正常拖拽、增加和刪除，只能一開始正常操作兩三個，然后后面就怎么點都沒有什么反應(yīng)。通過多次嘗試和查找方法，最終找到了解決辦法，我在這里總結(jié)一下。

一、效果圖

請?zhí)砑訄D片描述

二、拖拽及點擊無效解決方法

只需要在設(shè)置handle屬性就可以了，vuedraggable的文檔中有說明 options 配置項已經(jīng)不在使用，所以我們直接將handle單獨拿出來使用即可，像這樣:handle="'.defaultTypeTag'"，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點擊事件的項不能包含在這個類名里面，不然會無法觸發(fā)點擊事件。

三、vuedraggable的使用

這里只貼出html代碼，js相關(guān)代碼邏輯直接根據(jù)需求處理即可。

1、安裝和引入使用

// 安裝 
npm install vuedraggable
// 引入使用
import draggable from 'vuedraggable'

2、對應(yīng)的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>

到此這篇關(guān)于vue draggable組件實現(xiàn)拖拽及點擊無效問題的解決的文章就介紹到這了,更多相關(guān)vue draggable拖拽無效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: