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>
相关推荐
爱上纯净的蓝天1 天前
使用 AtomCode 构建微前端架构:从设计到实现实战
架构·vue·实战·react·微前端·atomcode
山海云端有限公司3 天前
随机诗词API实战:Vue项目接入完整示例与5个常见坑
vue·实战·前端开发·跨域·api调用·随机诗词api
暗冰ཏོ3 天前
Spring Boot + Vue3 订单支付模块技术实现:支付单、回调验签、幂等处理与余额扣减
前端·spring boot·后端·vue·微信支付·支付宝支付
万亿少女的梦1685 天前
基于Python的高考志愿填报辅助系统设计与实现
java·spring boot·python·mysql·vue
万亿少女的梦1685 天前
基于SpringBoot与Vue的历史博物馆展品展示与游客管理系统设计
spring boot·mysql·vue·系统设计·博物馆管理系统
衍生星球5 天前
SpringBoot3 + Vue3 + 微信小程序如何学习,以及学哪些技术,组件
sql·微信小程序·uni-app·vue·springboot
志尊宝5 天前
Vue3 环境搭建 + 第一个 HelloVue 项目(零基础入门)
vue.js·node.js·vue·css3
万亿少女的梦1685 天前
基于Spring Boot与Vue的繁星技术论坛系统设计与实现
java·spring boot·mysql·vue·系统设计
随心(cracker)6 天前
BeaverX Admin:一套真正能跑起来的开源管理后台
vue·.net·管理后台
万亿少女的梦1686 天前
基于SpringBoot的考研学习交流系统设计与开发
spring boot·mysql·vue·系统设计·论坛系统