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>
相关推荐
我的golang之路果然有问题7 小时前
实习中遇到的 CORS 同源策略自己的理解分析
前端·javascript·vue·reactjs·同源策略·cors
刘联其7 小时前
Vue3+Vite +dotenvx读取.env文件参数
vue
椰果uu1 天前
vue-virtual-scroller-虚拟滚动列表:渲染不定高度长列表+可控跳转
前端·javascript·typescript·vue
小和尚敲木头1 天前
记录一次vue3中this引发的开发没有问题,生产发生问题的分析
前端·vue
PieroPc1 天前
用FastAPI 后端 和 Vue3 前端写一个博客系统 例
前端·vue·fastapi
Web项目开发1 天前
VitePress 创建技术文档
vue
四谎真好看2 天前
JavaWeb 学习笔记(Day02)之Vue
笔记·学习·vue·学习笔记·javaweb
Sapphire~2 天前
Vue3-04 自定义组件Person
vue
沐墨染2 天前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
@AfeiyuO3 天前
Vue3 高德地图
vue·echarts