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

An Introduction to F# as Microsoft's / .NET's Answer to a Functional-First Programming Language

Don't Get Bitten by Hidden Bugs: Test Driven Development (TDD) and AAA Testing via xUnit

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Tips to Improve Your Mental Health as a Developer

Falling In Love With Vue.js

How to add Address Autocomplete and Verification Using Lob’s Vue Component Library

We Created JavaScript Data Grids So You Don't Have To Reinvent the Wheel

I Built a Product with a No-Code Tool and Pitched it to VCs

3 Tips to Improve Your Mental Health as a Developer

Falling In Love With Vue.js

How to add Address Autocomplete and Verification Using Lob’s Vue Component Library

We Created JavaScript Data Grids So You Don't Have To Reinvent the Wheel

I Built a Product with a No-Code Tool and Pitched it to VCs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps