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.
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.