Sample Multi Drag Code

index.html

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      tile
    >
          
      <draggable v-for="(item, index) in images"
                           v-model="images[index]"
                           group="image"
                           animation="150"
                           selected-class="sortableSelected"
                           ghost-class="imageGhost"
                           @change="imagesChanged"
                           tag="v-layout"
                           class="sortableRow imageContainer"
                           :component-data="{row: true}"
                           :force-fallback="true"
                           multi-drag>
        <v-flex v-for="image in item" class="droppableImage" :key="image.path">
                        {{image}}
        </v-flex>
      </draggable>
    </v-card>
  </v-app>
</div>

sample-multi-drag-code.markdown

Sample Multi Drag Code

A Pen by Felipe Prieto on CodePen.

License.

script.babel

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    images: [[
      'Real-Time',
      'Audience',
      'Conversions',
    ],[
      'Real-Time2',
      'Audience2',
      'Conversions2',
    ]]
  }),
  methods: {
    imagesChanged(e) {
      console.log(e)
    }
  }
})

scripts

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Flip535/Vue.Draggable@be82d2a15f99fc80c0fc836aa8550ff07d943a60/dist/vuedraggable.umd.js"></script>

style.css

.sortableSelected {
  background-color: yellow; 
}

.imageContainer {
  border: solid 10px black;
  padding: 4px;
}

.droppableImage {
  border: solid 1px black;
  margin: 5px;
}

.imageGhost {
  background-color: lightblue 
}

styles

<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://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />