Vue.Draggable div 项左右显示

Question

我是 Vue.js 的新手，对于这个项目，我使用 Vuedraggable 来拖动项目。目前，draggabble div 中的项目显示为

Text 1
Text 2
Text 3
Text 4

有没有办法改变它并显示为

Text 1   Text 2
Text 3   Text 4

JsFiddle Link = https://jsfiddle.net/ujjumaki/y1xw95rc/41/

查看

<div id="app">
  <div>
    <draggable id="first" data-source="juju" :list="todos" class="list-group" draggable=".item">
     <div class="list-group-item item" v-for="(element, index) in todos" :key="index" style="border-style: outset; 
margin-top:0.5%; width: 10%; border-color:#17a2b8; border-width:thin;">
     <p>
     {{element.text}} id {{element.id}}
     </p>
      </div>
   </draggable>
  </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

方法

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Text 1", id: "1" },
      { text: "Text 2", id: "2" },
      { text: "Text 3", id: "3"},
      { text: "Text 4", id: "4" }
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

Answer 1

尝试添加以下内容css：

#first {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  text-align: center;
}
.list-group-item {
  width: 100% !important;
}

Vue.Draggable div 项左右显示

Vue.Draggable div items display left and right

javascript

css

vue.js

vuejs2

vuedraggable