How do I make a two dimensional grid with Vue.Draggable?

Question

I am using Vue2 with Vuetify and I have a two dimensional grid of buttons.

<v-row>
  <v-col cols="6" v-for="item in itemList" :key="item.id">
    <v-btn color="black--text">
      {{ item.text }}
    </v-btn>
  </v-col>
</v-row>

I want to use Vue.Draggable to enable drag-and-drop reordering. This is what I tried.

<v-row>
  <v-col cols="6" v-for="item in itemList" :key="item.id">
    <draggable v-model="itemList" group="myGroup">
      <v-btn color="black--text">
        {{ item.text }}
      </v-btn>
    </draggable>
  </v-col>
</v-row>

This does not work as I would like. For one thing, when I drag any button to a new spot, the first button in the list disappears. For another, the hole left from the moved button does not fill until after the move is complete, which makes it look awkward. Additionally, the transition effects just don't look right. I also tried moving the draggable components outside of the v-row, but that makes the entire grid one draggable unit. What I would like is something that resembles the grid example here: https://sortablejs.github.io/Sortable/#grid. The code is given for the example below that, but not the grid example and I can't seem to replicate it.

I have been struggling to find information about the Sortable or Draggable packages. Is there an official documentation somewhere that I'm missing? The wiki on GitHub just has four miscellaneous articles, two of which are about a decade old and the documentation directories only have deprecated functionality. That only leaves the readme on each repo. Is that all there is? I want to make sure there's not a more robust source to reference.

Moritz Ringler · Accepted Answer · 2023-07-20 21:06:23Z

2

Currently, the draggable is inside the v-for, so a new instance is created for each element. Change it so the draggable wraps the element with the v-for, so you have one instance handling the whole list.

Since draggable renders its own HTML tag, you can have it render the v-row using the tag prop (otherwise you'll have a div between v-row and v-col, which breaks the grid).

This gives you something like:

  <draggable v-model="itemList" group="myGroup" tag="v-row">
    <v-col cols="6" v-for="item in itemList" :key="item.id">
      ...
    </v-col>
  </draggable>

Have a look at it in the snippet:

const colors = ['hotpink', 'cadetblue', 'magenta', 'yellow', 'green']

new Vue({
  el: '#app',
  components: {
    draggable: vuedraggable
  },
  vuetify: new Vuetify(),
  data() {
    return {
      itemList: Array(5).fill().map((_,i) => ({id: i, text: 'Button '+i, color: colors[i%colors.length]})),
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-main>
      <v-container>
          <draggable tag="v-row" v-model="itemList" group="myGroup">
            <v-col cols="6" v-for="item in itemList" :key="item.id" :style="{backgroundColor: item.color}">
              <v-btn color="black--text">
                {{ item.text }}
              </v-btn>

            </v-col>
          </draggable>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

edited Jul 20, 2023 at 21:06

answered Jul 20, 2023 at 20:59

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nerfherder616 Over a year ago

That seems to work. Thank you. Is there a way to use props associated with the v-row component when rendering it with a tag prop? For example, if I wanted to use the dense prop, is there a way to accomplish that?

nerfherder616 Over a year ago

Nevermind. I just found it. The componentData prop is the way to do that.

Collectives™ on Stack Overflow

How do I make a two dimensional grid with Vue.Draggable?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related