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>
相关推荐
MaCa .BaKa1 天前
37-智慧医疗服务平台(在线接诊/问诊)
java·vue.js·spring boot·tomcat·vue·maven
是梦终空1 天前
Python毕业设计219—基于python+Django+vue的房屋租赁系统(源代码+数据库+万字论文)
python·django·vue·毕业设计·毕业论文·源代码·房屋租赁系统
LuckyLay4 天前
AI教你学VUE——Gemini版
前端·vue·学习路线·学习资源
阿黄学技术4 天前
Vite简单介绍
前端·前端框架·vue
MaCa .BaKa4 天前
36-校园反诈系统(小程序)
java·spring boot·mysql·小程序·vue·maven·uniapp
csj505 天前
前端基础之《Vue(14)—组件通信》
前端·vue
xiegwei7 天前
使用Vite创建vue3项目
vue·vite
ApiHug7 天前
ApiHug SDK 1.3.5 Vue 框架 - 预览版
前端·javascript·vue.js·spring·vue·apihug·apismart
3D虚拟工厂7 天前
1️⃣7️⃣three.js_OrbitControls相机控制器
javascript·3d·vue·blender·three.js·uv
samuel91811 天前
pinia实现数据持久化插件pinia-plugin-persist-uni
前端·vue