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>
相关推荐
jonyleek3 小时前
独立租户,统一底座:基于Vue3打造的JVS开源多租户框架设计与实现
低代码·前端框架·开源·vue·软件开发·轻应用
狼性书生16 小时前
uniapp实现的Tab 选项卡组件模板
前端·uni-app·vue·组件·插件
水月wwww1 天前
vue学习之组件与标签
前端·javascript·vue.js·学习·vue
星光一影1 天前
基于SpringBoot智慧社区系统/乡村振兴系统/大数据与人工智能平台
大数据·spring boot·后端·mysql·elasticsearch·vue
IT教程资源C2 天前
(N_151)基于微信小程序校园学生活动管理平台
mysql·vue·前后端分离·校园活动小程序·springboot校园活动
AI3D_WebEngineer2 天前
企业级业务平台项目设计、架构、业务全解之组件库篇
前端·javascript·vue
木子李BLOG3 天前
vue.js设计与实现(待续)
vue
悟能不能悟3 天前
reason: unable to verify the first certificate 如何处理
vue
!win !3 天前
通过重写组件轻松掌握用JSX写Vue项目
vue·jsx
zy happy4 天前
RuoyiApp 在vuex,state存储nickname vue2
前端·javascript·小程序·uni-app·vue·ruoyi