SortableJS Drag into empty Vuetify v-data-table not working

0
votes

I'm trying to create a drag-drop between two v-data-tables in Vuetify using SortableJS. Here is an example with 3 tables: https://codepen.io/arno-van-oordt/pen/MdqrgK

It works fine if both tables start with at least one item (between table 1 and 3 for example). But when a table starts of empty I can't seem to drop items onto it.

What would be the best solution to this issue?

new Vue({
  el: "#app",
  data() {
    return {
      headers: [
        {
          text: "Title",
          value: "name"
        }
      ],
      list1: [
        {
          name: "Item1-1"
        },
        {
          name: "Item1-2"
        }
      ],
      list2: [],
      list3: [
        {
          name: "Item3-1"
        },
        {
          name: "Item3-2"
        }
      ]
    };
  },
  mounted: function() {
    new Sortable(this.$refs.table1.$el.getElementsByTagName("tbody")[0], {
      group: "test",
      draggable: ".sortableRow"
    });

    new Sortable(this.$refs.table2.$el.getElementsByTagName("tbody")[0], {
      group: "test",
      draggable: ".sortableRow"
    });

    new Sortable(this.$refs.table3.$el.getElementsByTagName("tbody")[0], {
      group: "test",
      draggable: ".sortableRow"
    });
  },
  methods: {}
});
1
vue.jsvuetify.jssortablejs

1 Answers

0
votes

This was a flaw in SortableJS which is now solved in the next-version branch. This branch is still in development but is backwards compatible and will be merged to the master branch soon.

Edit: It is now in the master branch