Buefy“表格”组件拖放不起作用 - 即使在他们的网站上也不行

Question

Well hello, this is my first Question here, so excuse me if im doing anything wrong :).

I need a table which is capable of drag&drop for an editor im programming. The Buefy Table component looked really promising, when i tried it on their website in their browser. When I copied the code and tried it, I got the PoP-Up message telling me I moved something, but visually and in my data the elements didn't move at all. Then I went back to the Buefy Docs, but it didn't work there as well. How?? I am looking for a fix, or for a workaround using arr.splice(). I tried, but it didn't work.

Thanks in advance!

//in the component

    dragstart(payload) {
      this.draggingRow = payload.row;
      this.draggingRowIndex = payload.index;
      payload.event.dataTransfer.effectAllowed = 'copy';
    },
    dragover(payload) {
      payload.event.dataTransfer.dropEffect = 'copy';
      payload.event.target.closest('tr').classList.add('is-selected');
      payload.event.preventDefault();
    },
    dragleave(payload) {
      payload.event.target.closest('tr').classList.remove('is-selected');
      payload.event.preventDefault();
    },
    drop(payload) {
      payload.event.target.closest('tr').classList.remove('is-selected');
      const droppedOnRowIndex = payload.index;
      const droppedOnRow = payload.row;
      this.$store.commit('Course/changePos', this.draggingRowIndex, this.draggingRow, droppedOnRowIndex, droppedOnRow);
      this.$buefy.toast.open(`${this.draggingRow.meta.title} von Platz ${this.draggingRowIndex + 1} auf Platz ${droppedOnRowIndex + 1} verschoben.`);
    },

//store:

changePos(s, draggingRowIndex, draggingRow, droppedOnRowIndex, droppedOnRow) {
    state.a.units.splice(droppedOnRowIndex, 1, draggingRow);
    state.a.units.splice(draggingRowIndex, 1, droppedOnRow);
  },

The Code above made one element undefined and didn't change the other one.

Answer 1

I believe the first argument of splice should be the index .

state.a.units.splice(droppedOnRow, 1, draggingRow);

to

state.a.units.splice(droppedOnRowIndex, 1, draggingRow);