vue - vuetify drag & drop

https://github.com/SortableJS/Vue.Draggable

GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js

 

설치

npm i -S vuedraggable

 

 

import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },

  methods: {
    // data-table 리스트 순서 변경시 호출
    dataTableChange: function(params) {
      console.log(params);
    }
  }
};

 

<v-data-table
  :headers="headers"
  :items="items"
  calculate-widths
  item-key="id"
>
  <template v-slot:body="props">
    <draggable
      :list="props.items"
      tag="tbody"
      @change="dataTableChange(props.items)"
    >
      <tr v-for="(item, index) in props.items" :key="index">
        <td>
          <p>
            {{ item }}
          </p>
        </td>
      </tr>
    </draggable>
  </template>
</v-data-table>

 

참고 url :

https://dev.to/andynoir/draggable-table-row-with-vuejs-vuetify-and-sortablejs-1o7l