Cards - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/card

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
<div id="app">
  <b-card-group columns>
    <b-col v-for="group in groups" :key="group.name">
      <draggable v-model="group.stories" :options="{group:'stories'}" style="min-height: 400px;" @change="updateGroup($event, group)">
        <b-card :title="story.name" class="mb-2" v-for="story in group.stories" :key="story.name">
          <p class="card-text" v-html="story.description"></p>
        </b-card>
      </draggable>
    </b-col>

  </b-card-group>
</div>

CSS

#app {
  padding: 20px;
  height: 500px;
}

JavaScript

window.app = new Vue({
  el: '#app',
  data() {
    return {
      groups: [{
        name: "todo",
        stories: [{
          name: "hello world 1",
          description: "consectetur adipiscing elit, sed do eiusmod tempor dolore magna aliqua."
        }, {
          name: "hello world 4",
          description: "consectetur adipiscing elit tempor dolore magna aliqua. Consectetur a erat nam at lectus urna duis."
        }, ]
      }, {
        name: "done",
        stories: [{
          name: "hello world 2",
          description: "consectetur adipiscing elit, sed do eiusmod tempor dolore magna aliqua. , sed do eiusmod Consectetur a erat nam at lectus urna duis."
        }]
      }, {
        name: "doing",
        stories: [{
          name: "hello world 3",
          description: "Consectetur a erat nam at lectus urna duis. consectetur adipiscing elit, sed do eiusmod tempor dolore magna aliqua. Consectetur a erat nam at lectus urna duis."
        }]
      }]
    }
  },
  methods: {
  	updateGroup(e, group) {
    	console.log('wdqdwqdw')
    	console.log(e)
    	console.log(group)
    }
  }
});