保存 Sortable 组件中项目的位置
创始人
2024-11-22 03:30:52
0

在 Sortable 组件中保存项目的位置,可以使用以下解决方法。

  1. 使用一个数组来保存项目的位置。当项目在组件中进行拖动排序时,将数组中的项目位置进行更新。
data() {
  return {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
    sortableOptions: {
      onUpdate: (event) => {
        this.items.splice(event.newIndex, 0, this.items.splice(event.oldIndex, 1)[0]);
      }
    }
  };
}
  1. 使用一个对象来保存项目的位置,其中键为项目的唯一标识符,值为项目的位置。当项目在组件中进行拖动排序时,更新对象中对应项目的位置。
data() {
  return {
    items: {
      'item1': 'Item 1',
      'item2': 'Item 2',
      'item3': 'Item 3',
      'item4': 'Item 4'
    },
    sortableOptions: {
      onUpdate: (event) => {
        const keys = Object.keys(this.items);
        const draggedItem = keys[event.oldIndex];
        keys.splice(event.oldIndex, 1);
        keys.splice(event.newIndex, 0, draggedItem);
        const newItems = {};
        keys.forEach((key) => {
          newItems[key] = this.items[key];
        });
        this.items = newItems;
      }
    }
  };
}
  1. 在每个项目中添加一个位置字段,并在拖动排序时更新该字段的值。然后,可以根据位置字段对项目进行排序。
data() {
  return {
    items: [
      { id: 1, name: 'Item 1', position: 1 },
      { id: 2, name: 'Item 2', position: 2 },
      { id: 3, name: 'Item 3', position: 3 },
      { id: 4, name: 'Item 4', position: 4 }
    ],
    sortableOptions: {
      onUpdate: (event) => {
        const draggedItem = this.items[event.oldIndex];
        this.items.splice(event.oldIndex, 1);
        this.items.splice(event.newIndex, 0, draggedItem);
        this.items.forEach((item, index) => {
          item.position = index + 1;
        });
      }
    }
  };
}

这些方法都使用 onUpdate 事件来监听项目的拖动排序操作,然后根据拖动前后的位置对项目的位置进行更新。最终可以将项目的位置保存在一个数组或对象中,以便在需要时使用。

相关内容

热门资讯

9分钟了解!福建众娱辅助透视系... 9分钟了解!福建众娱辅助透视系统!总是一直总是有辅助软件(确实有挂)-哔哩哔哩1、福建众娱辅助透视系...
第6分钟了解!新玉海楼游戏茶苑... 第6分钟了解!新玉海楼游戏茶苑!真是一直总是有辅助工具(有挂方略)-哔哩哔哩1、下载好新玉海楼游戏茶...
三分钟了解!微信九游大厅辅助!... 三分钟了解!微信九游大厅辅助!切实是有辅助工具(今日头条)-哔哩哔哩微信九游大厅辅助是不是有人用挂微...
八分钟了解!科乐填大坑辅助器!... 八分钟了解!科乐填大坑辅助器!真是有辅助攻略(有挂透视)-哔哩哔哩1、在科乐填大坑辅助器插件功能辅助...
5分钟了解!蛮籽酉阳大贰辅助!... 5分钟了解!蛮籽酉阳大贰辅助!真是是有辅助攻略(有挂功能)-哔哩哔哩1、玩家可以在蛮籽酉阳大贰辅助线...
三分钟了解!竞技联盟辅助!真是... 您好,竞技联盟辅助这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302】很多玩家在...
十分钟了解!辅助软件购买平台!... 十分钟了解!辅助软件购买平台!本来是真的有辅助app(有挂神器)-哔哩哔哩1、完成辅助软件购买平台有...
第七分钟了解!广西友乐app辅... 您好,广西友乐app辅助工具这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302】...
第7分钟了解!微乐小程序游戏破... 第7分钟了解!微乐小程序游戏破解器!好像是真的有辅助软件(有挂讲解)-哔哩哔哩1、该软件可以轻松地帮...
第1分钟了解!jj斗地主有透视... 第1分钟了解!jj斗地主有透视吗!切实真的是有辅助攻略(新版有挂)-哔哩哔哩1、在jj斗地主有透视吗...