draggable 组件指定区域可进行拖拽

在移动端页面中,draggable 组件导致 van-cell 的 @click 方法只有在最右边才有效果,通常是因为 draggable 捕获了触摸事件(如 touchstart 和 touchmove),而这些事件会阻止事件冒泡到子组件(如 van-cell)。在移动端,触摸事件的行为与鼠标事件略有不同,因此更容易出现这种问题。

如何解决?

使用 handle 属性

javascript 复制代码
<draggable
  v-model="list"
  chosenClass="chosen"
  forceFallback="true"
  handle=".drag-handle"
  @start="onStart"
  @end="onEnd"
  @update="updateList"
>
  <div v-for="item in list" :key="item.id" class="draggable-item">
    <van-cell
      @click="detailUrl(item.id)"
      title-style="padding-left:7px;color:#40556E"
      :title="item.roomName"
      :center="true"
      style="margin-left: 20px;"
    >
      <template #icon>
        <img
       	  class="drag-handle"
          src="../../../assets/img/piliangyidongtubiao 2 (1).svg"
          alt=""
          style="position: absolute; right: 8px"
        />
      </template>
    </van-cell>
  </div>
</draggable>
相关推荐
by__csdn3 小时前
Vue 中计算属性、监听属性与函数方法的区别详解
前端·javascript·vue.js·typescript·vue·css3·html5
zhu_zhu_xia13 小时前
vue3+vite打包出现内存溢出问题
前端·vue
思密吗喽15 小时前
宠物商城系统
java·开发语言·vue·毕业设计·springboot·课程设计·宠物
雨雨雨雨雨别下啦16 小时前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue
紫麦熊2 天前
vue3 keepalive
vue·keepalive
未来之窗软件服务2 天前
幽冥大陆(三十四)VUE +node智慧农业电子秤读取——东方仙盟炼气期
开发语言·vue·电子秤·东方仙盟·东方仙盟sdk
vivo互联网技术3 天前
浅谈 AI 搜索前端打字机效果的实现方案演进
前端·vue·dom
harrain7 天前
vue2开发环境搭建指南
vue
by__csdn8 天前
Electron+Vite:实现electron + vue3 + ts + pinia + vite高效跨平台开发指南
前端·javascript·vue.js·typescript·electron·node.js·vue
人工智能训练8 天前
前端框架选型破局指南:Vue、React、Next.js 从差异到落地全解析
运维·javascript·人工智能·前端框架·vue·react·next.js