Question

我正在尝试使用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: {}
});

Answer 1

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

编辑：它现在在master分支中

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

1 个答案: