如何实现Vue.draggable水平拖拽列表？

direction="horizontal" 仅用于限制拖拽操作的轴向，不会自动将子元素设置为水平排列，90%以上的失效场景都是因为容器布局为默认垂直流导致的，可按以下步骤修复：

修复步骤 #

• 第一步：给拖拽容器添加flex布局，强制子元素水平排列

.tier-sort {
  display: flex;
  /* 可选：元素超出容器宽度时可横向滚动 */
  overflow-x: auto;
  /* 禁止换行，保持单行水平排列 */
  flex-wrap: nowrap;
  gap: 10px; /* 可选，调整拖拽元素间距 */
}
.tier-item {
  /* 给子元素设置固定宽高，不要占满整行宽度 */
  width: 120px;
  height: 120px;
  flex-shrink: 0; /* 防止元素被容器压缩变形 */
}

• 第二步：补充组件属性适配版本
  如果你使用的是Vue2版本的旧版vuedraggable，需要额外添加axis="x"属性配合direction生效，修改后的组件代码如下：

<div class="tier-sort">
  <draggable 
    v-model="items" 
    direction="horizontal"
    axis="x"
  >
    <div 
      v-for="item in items" 
      :key="item.id" 
      class="tier-item" 
      :style="item.image"
    >
    </div>
  </draggable>
</div>

• 第三步：排查冲突属性
  如果上述配置后仍然无效，检查是否在设置group拖拽分组时额外限制了拖拽方向，或者父容器存在异常定位、overflow属性影响拖拽判定。

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