SortableJS Перетаскивание в пустую v-data-таблицу Vuetify не работает - PullRequest
Новая
       31

SortableJS Перетаскивание в пустую v-data-таблицу Vuetify не работает

0 голосов
/ 29 мая 2019

Я пытаюсь создать drag-drop между двумя v-data-таблицами в Vuetify, используя SortableJS. Вот пример с 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: {}
});

1 Ответ

0 голосов
/ 31 мая 2019

Это был недостаток в SortableJS, который теперь решается в ветке next-version . Эта ветвь еще находится в разработке, но имеет обратную совместимость и скоро будет объединена с веткой master.

Редактировать: теперь это в основной ветке

...