在移动端页面中,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>