SortableJS 拖入空的 Vuetify v-data-table 不起作用答案

【问题标题】：SortableJS Drag into empty Vuetify v-data-table not workingSortableJS 拖入空的 Vuetify v-data-table 不起作用
【发布时间】：2019-10-14 21:26:02
【问题描述】：

我正在尝试使用 SortableJS 在 Vuetify 中的两个 v-data-tables 之间创建拖放。这是一个包含 3 个表的示例：https://codepen.io/arno-van-oordt/pen/MdqrgK

如果两个表都以至少一个项目开头（例如在表 1 和 3 之间），则可以正常工作。但是当表格开始为空时，我似乎无法将物品放到上面。

这个问题的最佳解决方案是什么？

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: {}
});

【问题讨论】：

标签： vue.js vuetify.js sortablejs

【解决方案1】：

这是 SortableJS 中的一个缺陷，现已在 next-version 分支中解决。该分支仍在开发中，但向后兼容，很快将合并到master 分支。

编辑：它现在在主分支中

【讨论】：