Recently delving into Vue.js, I am utilizing Vuedraggable for item dragging in my project. Currently, the items in the draggable div are shown as
Text 1
Text 2
Text 3
Text 4
Is there a way to rearrange them to display like this?
Text 1 Text 2
Text 3 Text 4
JsFiddle Link = https://jsfiddle.net/ujjumaki/y1xw95rc/41/
View
<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c0dcc1c7d2d1dfd6d9c0f3829d8b9d87">[email protected]</a>/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
Method
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
}
}
})