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>
相关推荐
Curvatureflight13 小时前
前端国际化 i18n 落地实践:语言包、动态文案和格式化问题怎么处理?
前端·c++·vue
优雅格子衫18 小时前
uniapp 拍照相册选取后超级好用的裁剪组件,增加水印完全自定义
开发语言·前端·javascript·uni-app·vue
路光.18 小时前
uniapp中解决webview在app中调用,有过渡空白问题,增加过渡动效
uni-app·vue·app·uniapp
暗冰ཏོ2 天前
《2026 Vue2 + Vue3 完整学习指南:基础语法、路由缓存、登录拦截、项目实战与面试题》
前端·vue.js·vue·vue3·vue2
七仔啊2 天前
cad文件在线查看
vue
相忘于江湖4265433 天前
vs code 代码保存自动格式化
前端·vue
study-Java4 天前
校园失物招领平台
java·spring boot·vue·intellij-idea·visual studio code
MaCa .BaKa4 天前
53-智慧工地人员考勤与工时管理系统
java·spring boot·mysql·tomcat·vue·maven
华玥作者5 天前
从“碎片化”到“资产化”:Vue3 + UniApp 组件库的进化论
ui·uni-app·vue·组件库
薛定谔的猫喵喵5 天前
从零到一:Spring Boot + Vue 项目前后端运行完整指南
vue.js·spring boot·后端·pycharm·vue