vue?draggable組件拖拽點(diǎn)擊無效問題怎么解決

今天小編給大家分享一下vue draggable組件拖拽點(diǎn)擊無效問題怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、效果圖

二、拖拽及點(diǎn)擊無效解決方法

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

三、vuedraggable的使用

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

1、安裝和引入使用

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

2、對(duì)應(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>

以上就是“vue draggable組件拖拽點(diǎn)擊無效問題怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。