gpt4 book ai didi

javascript - 拖放后重置所有项目的 Vue.js 列表顺序

转载 作者:搜寻专家 更新时间:2023-10-30 22:15:15 25 4
gpt4 key购买 nike

我有一个拖放组件(使用 Sortable),但我无法弄清楚一旦将项目放入新位置后更新列表顺序的逻辑。

代码(Vue.js):

new Vue({
el: '#app',
template: '#dragdrop',
data() {
return {
list: [
{name: 'Item 1', id: 1, order: 0},
{name: 'Item 2', id: 2, order: 1},
{name: 'Item 3', id: 3, order: 2},
{name: 'Item 4', id: 4, order: 3},
{name: 'Item 5', id: 5, order: 4},
{name: 'Item 6', id: 5, order: 5},
],
}
},
ready() {
Sortable.create(document.getElementById('sort'), {
draggable: 'li.sort-item',
ghostClass: "sort-ghost",
animation: 80,
onUpdate: function(evt) {
console.log('dropped (Sortable)');
}
});
},
methods: {
dropped() {
console.log('dropped (Vue method)');
}
}
});

我有一个可用的 JSFiddle:https://jsfiddle.net/jackbarham/rubagbc5

我希望让数组中的 order 同步,这样我就可以在项目被删除后进行 AJAX 更新。

最佳答案

这不是最优雅的解决方案,但我认为它可行。这使用 Sortable onUpdate 处理程序来更新底层数组。每当一个项目被拖到一个新位置时,它就会被移动到数组中的相同位置——这样 View 模型就会与 View 中显示的内容保持同步。然后项目 order 属性得到更新以匹配它们在数组中的新位置。

new Vue({
el: '#app',
template: '#dragdrop',
data() {
return {
list: [
{name: 'Item 1', id: 1, order: 0},
{name: 'Item 2', id: 2, order: 1},
{name: 'Item 3', id: 3, order: 2},
{name: 'Item 4', id: 4, order: 3},
{name: 'Item 5', id: 5, order: 4},
{name: 'Item 6', id: 6, order: 5},
],
}
},
ready() {
var vm = this;
Sortable.create(document.getElementById('sort'), {
draggable: 'li.sort-item',
ghostClass: "sort-ghost",
animation: 80,
onUpdate: function(evt) {
console.log('dropped (Sortable)');
vm.reorder(evt.oldIndex, evt.newIndex);
}
});
},
methods: {
reorder(oldIndex, newIndex) {
// move the item in the underlying array
this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
// update order properties based on position in array
this.list.forEach(function(item, index){
item.order = index;
});
}
}
});

如果需要,您可以优化 reorder() 方法。

这是一个 updated version of your jsfiddle .

我觉得这是一种应该尝试打包到自定义指令中的功能,但我还没有想出具体的操作方法。

关于javascript - 拖放后重置所有项目的 Vue.js 列表顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34881844/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com