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>
相关推荐
caoerzhong13 小时前
JeeWMS 开源仓库管理系统权限与域验证解析:Java WMS 如何把数据权限管到仓、货主与人
java·python·开源·vue
caoerzhong14 小时前
JeeWMS 开源仓库管理系统多租户架构解析:一套 Java WMS 如何同时服务多个货主与多个仓库
java·架构·开源·vue
ynchyong15 小时前
VUE 中 不能将类型“R[]”分配给类型“UnwrapRefSimple<R>[]”
typescript·vue·ts·unwraprefsimple
Leaderxin21 小时前
还在用 Electron?6 种跨平台桌面方案横评:Rust + Vue 把安装包从 224MB 干到 4.7MB
rust·vue·跨平台·tauri·桌面应用
YWL21 小时前
vue-time-axis-plus进阶:双进度条+跨空白续播+播放指针,打造专业级监控回放体验
前端·javascript·vue·时间轴
尾善爱看海5 天前
Vue 面试进阶篇:Composition API、插槽、自定义指令……8 个章节 + 高频面试题全解析
前端·javascript·vue.js·面试·vue
明耀5 天前
vue chart 强行刷新高度,宽度
vue
YWL5 天前
OpenLayers弹窗Overlay深度实战
前端·vue·openlayers
YWL5 天前
OpenLayers+ECharts联动:地图点击联动图表,数据可视化大屏方案
前端·信息可视化·vue·echarts·openlayers
YWL6 天前
OpenLayers地图分享:URL参数同步+分享链接生成,让用户一键分享地图视角
前端·javascript·vue·openlayers