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>
相关推荐
恶猫9 小时前
网页自动化模拟操作时,模拟真实按键触发事件【终级方案】
前端·javascript·自动化·vue·网页模拟
无心使然云中漫步13 小时前
Openlayers调用ArcGis地图服务之五 —— 要素识别(/identify)
前端·arcgis·vue·数据可视化
蜡台13 小时前
H5入住浙里办App详细步骤
vue·uniapp·h5·浙政钉
呱牛do it1 天前
企业级门户网站设计与实现:基于SpringBoot + Vue3的全栈解决方案(Day 7)
java·vue
呱牛do it4 天前
企业级门户网站设计与实现:基于SpringBoot + Vue3的全栈解决方案(Day 5)
java·vue
无心使然云中漫步4 天前
Openlayers调用ArcGis地图服务之一 —— 地图切片(/tile)
前端·arcgis·vue·数据可视化
Python私教4 天前
我在开发 ShadcnVueAdmin 时发现了一个 Claude Code 超级插件
vue
无心使然云中漫步5 天前
Openlayers调用ArcGis地图服务之三 —— 要素查询(/query)
前端·arcgis·vue·数据可视化
呱牛do it5 天前
企业级门户网站设计与实现:基于SpringBoot + Vue3的全栈解决方案(Day 3)
java·vue
呱牛do it5 天前
企业级门户网站设计与实现:基于SpringBoot + Vue3的全栈解决方案(Day 4)
java·vue