Vuetify：v-img未设置draggable仍可拖拽的问题求助

问题根源 #

原生<img>标签默认具备拖拽行为，Vuetify的v-img组件作为封装层，直接设置:draggable="false"可能无法正确传递到底层的原生img元素上，导致默认拖拽逻辑依然生效——这就是你即使设置了属性，元素仍可拖拽的原因。

可行解决方案 #

1. 直接给原生img绑定draggable属性 #

利用v-img的attrs绑定能力，将draggable属性直接传递给内部原生img：

<v-img v-else class="cannotDrag"
  :src="cell.content"
  width="40"
  :attrs="{ draggable: false }"
></v-img>

2. 通过CSS禁用拖拽 #

用CSS样式彻底阻断拖拽行为，同时可以顺便禁用文本选择（避免拖拽时选中文本）：

.cannotDrag img {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

3. 修正动态绑定逻辑 #

如果需要根据条件动态控制拖拽状态，确保属性正确作用到原生元素：

<v-img v-else class="cannotDrag"
  :src="cell.content"
  width="40"
  v-bind="$attrs"
  :draggable="false"
></v-img>

关于临时方案的说明 #

你通过@dragstart调用preventDefault()的方式确实能生效，这是从事件层面拦截了拖拽触发，但上述方案从元素属性或样式层面直接禁用拖拽，更贴合你“无需额外事件处理”的预期。

内容的提问来源于stack exchange，提问作者quilkin