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>
相关推荐
东东51616 小时前
xxx医患档案管理系统
java·spring boot·vue·毕业设计·智慧城市
码界奇点1 天前
基于Spring Boot和Vue3的无头内容管理系统设计与实现
java·spring boot·后端·vue·毕业设计·源代码管理
东东5161 天前
基于Web的智慧城市实验室系统设计与实现vue + ssm
java·前端·人工智能·后端·vue·毕业设计·智慧城市
不甘平凡的小鸟1 天前
vue3与cef3交互
前端·vue·cef3
武哥聊编程1 天前
【原创精品】基于Springboot3+Vue3的服装租赁平台
spring boot·mysql·vue·课程设计
weixin_439937762 天前
tortoiseGit 使用
java·前端·git·vue
.切切切 切萝卜2 天前
【vueconfig-proxy代理解决跨域问题】
vue·proxy模式
任小栗2 天前
uniappx实现app壳子,可直接拿来用
vue·uniapp
奔跑的web.2 天前
前端使用7种设计模式的核心原则
前端·javascript·设计模式·typescript·vue
千寻技术帮2 天前
10410_基于Springboot的文化旅游宣传网站
spring boot·后端·vue·源码·旅游·安装·在线旅游