如何将Vue.Draggable组件内拖拽项从垂直排列改为左右两列布局

你只需要调整draggable容器的CSS布局规则即可实现两列排列效果，拖拽功能不会受布局样式影响，以下是两种实现方案：

方案1：CSS Grid实现（推荐） #

Grid布局原生支持多列等分，代码更简洁，适配性更好：

1. 给draggable容器的list-group类添加Grid布局规则：

.list-group {
  display: grid;
  /* 定义两列等宽布局 */
  grid-template-columns: 1fr 1fr;
  /* 控制行列之间的间距，可自行调整数值 */
  gap: 8px 16px;
}

2. 删掉子元素行内样式里的width: 10%设置，让子元素自动占满单元格宽度，修改后的子元素代码如下：

<div class="list-group-item item" v-for="(element, index) in todos" :key="index" 
  style="border-style: outset; margin-top:0.5%; border-color:#17a2b8; border-width:thin;">
  <p>
    {{element.text}} id {{element.id}}
  </p>
</div>

方案2：Flex布局实现 #

如果需要兼容低版本浏览器，可以用Flex布局实现：

1. 给draggable容器的list-group类添加Flex布局规则：

.list-group {
  display: flex;
  /* 元素超出宽度自动换行 */
  flex-wrap: wrap;
  /* 控制元素之间的间距，可自行调整 */
  gap: 8px;
}

2. 调整子元素宽度，保证每行刚好放下两个元素：

.list-group-item {
  /* 宽度设为48%，预留4%的空间放间距 */
  width: 48%;
  box-sizing: border-box;
}

两种方案都不会影响原有拖拽逻辑，拖拽排序时会自动适配两列布局规则。

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