Vue Draggable is a great library for Vue.js that makes it super simple to create interactive draggable components with virtually no effort. I have recently used it to create an interactive kanban board, in which tasks can be rearranged and moved between cards just by dragging. So let's start by creating some reorderable cards! P.S. I'm using Vuetify as the UI framework, in case the tags look unfamiliar. Add Card < > template < > v-container fluid < > v-row < = > v-col class "text-right" < = @ = > v-btn color "primary" depressed click "addCard" </ > v-btn </ > v-col </ > v-row < > v-row < = = = = = > v-col v-for "(card, i) in cards" :key "i" cols "12" sm "6" md "4" < > v-card outlined < > v-card-title < = > v-text-field v-model "card.title" </ > v-text-field </ > v-card-title </ > v-card </ > v-col </ > v-row </ > v-container </ > template < > script { : ({ : []
  }), : {
    addCard() { card = { : , : [],
      } .cards.push(card)
    },
  }
} export default data => () cards methods const title 'New Card' tasks this </ > script The code above should give you the ability to create cards by clicking the Add Card button, but they aren't draggable yet. First, make sure that you have VueDraggable installed by running: < > script Draggable import from 'vuedraggable' export default {
  components: {
    Draggable,
  } , : ( data => () {
    cards: []
  } Finally, all we need to do to make the cards draggable is to wrap the cards with the draggable component. In our case, we're replacing v-row with draggable. <draggable : = = = >
  <v-col = : = = = = > . list "cards" group "cards" class "row" v-for "(card, i) in cards" key "i" cols "12" sm "6" md "4" .. There are two attributes that are important to note. First, the list attribute defines the list of objects that should be draggable, in our case the cards array. Secondly, the group attribute is just a way of identifying groups of draggable components (you'll see why this is useful when we move on to creating draggable tasks). Try running your project now. You should be able to create multiple cards, and reorder them by dragging! Now let's move on to the tasks. Below the v-card-title tag we need to add the following code: Delete Add Activity Delete Card < > v-card-text < = = = > draggable :list "card.tasks" group "tasks" class "row" < = = = > v-col v-for "(task, j) in card.tasks" :key "j" cols "12" < = > v-text-field v-model "task.title" < > template v-slot:append < = = @ = > v-btn color "error" text class "ml-3" click "deleteTask(i, j)" </ > v-btn </ > template </ > v-text-field </ > v-col < > template v-slot:footer < = > v-col cols "12" < = @ = > v-btn color "primary" depressed block click "addTask(card)" </ > v-btn </ > v-col < = > v-col cols "12" < = @ = > v-btn color "error" text block click "deleteCard(i)" </ > v-btn </ > v-col </ > template </ > draggable </ > v-card-text Add the following in the script section: methods: {
    deleteCard(index) {
      this = [.. ( , index), .. (index + )]
    },
    addTask(card) {
      const task = {
        title: }

      card (task)
    },
    deleteTask(cardIndex, taskIndex) {
      const card = this [cardIndex]
      card = [.. ( , taskIndex), .. (taskIndex + )]
    }
} .cards .this .cards .slice 0 .this .cards .slice 1 'New Activity' .tasks .push .cards .tasks .card .tasks .slice 0 .card .tasks .slice 1 Here we've added the ability to add and delete tasks from each card, as well as delete the card itself. We've also added another draggable component, which wraps around each group of tasks. We've given it a group name of tasks. This is important because each list of tasks will have the same group name, meaning that we can drag tasks from one card to another! P.S. if you only wanted tasks to be reorderable within its own card, you would have to create a unique group name for each list of tasks. And that's it! Hopefully, this post has shown you how quick and easy it is to develop highly interactive draggable apps using the Vue Draggable library. What ideas will you use it for? Conclusion In this post, I have shown you the basics of using the Vue Draggable library to create an interactive kanban board. The full repository can be found . here on GitHub I post mostly about full stack .NET and Vue web development. To make sure that you don't miss out on any posts, please follow this blog and . If you found this post helpful, please like it and share it. You can also . subscribe to my newsletter find me on Twitter Previously published at https://samwalpole.com/build-an-interactive-kanban-board-with-vue-draggable

Super

Twitter

2022 - HackerNoon Contributor of the Year - Clean Code

2022 - HackerNoon Contributor of the Year - Dotnet

2022 - HackerNoon Contributor of the Year - Es6

2022 - HackerNoon Contributor of the Year - Functional Programming

Subscribe to my mailing list

Nominated for 2022 - HackerNoon Contributor of the Year - Es6

Nominated for 2022 - HackerNoon Contributor of the Year - Clean Code

Nominated for 2022 - HackerNoon Contributor of the Year - Dotnet

Nominated for 2022 - HackerNoon Contributor of the Year - Functional Programming

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Use The Vue Draggable Library to Create an Interactive Kanban Board

How to Use The Vue Draggable Library to Create an Interactive Kanban Board

Too Long; Didn't Read

Companies Mentioned

Sam Walpole

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Use The Vue Draggable Library to Create an Interactive Kanban Board

Too Long; Didn't Read

Companies Mentioned

Sam Walpole

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES