vue draggable組件實現拖拽及點擊無效問題的解決

Posted on by

在實現一個移動端項目的時候，根據產品需求，要實現一個既能增加刪除又可以拖拽調換位置的效果，然後我使用瞭draggable組件，然後發現放到手機上的時候蘋果(ios)手機可以正常使用，但是鴻蒙系統的手機（例如華為pro40）有些是不可以正常拖拽、增加和刪除，隻能一開始正常操作兩三個，然後後面就怎麼點都沒有什麼反應。通過多次嘗試和查找方法，最終找到瞭解決辦法，我在這裡總結一下。

一、效果圖

請添加圖片描述

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

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

三、vuedraggable的使用

這裡隻貼出html代碼，js相關代碼邏輯直接根據需求處理即可。

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組件實現拖拽及點擊無效問題的解決的文章就介紹到這瞭,更多相關vue draggable拖拽無效內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：