Question

我需要一些概念上的帮助。我有一个具有多个时钟，一个日期和一条消息的应用程序，并且用户需要能够以任何方式对这些项目进行重新排序。

对于时钟，他们可以添加任意数量的时钟，包括没有时钟。为此，我收集了一组时钟。然后，我将显示一个Date对象和一个Message对象。

下面是每个设置的基本示例，如果需要进行此设置，我可以添加这些设置：

clocks: [
  {
    clockLabel: 'My clock',
    ...etc...
  },
  {
    clockLabel: 'My second clock',
    ...etc...
  }
],
theDate: [
  enabled: true,
  showYear: true,
  ...etc...
],
customMessage: [
  enabled: true,
  text: 'My custom message',
  ...etc...
]

我需要找出一种方法，可以将所有这些元素相互重新排列，以便可以有两个时钟，然后是日期，然后是另一个时钟，然后是消息。

这里的想法是，用户可以在设置中单击每个项目的向上或向下箭头，以在所有项目的列表中向上或向下移动它。

我在考虑也许有一个单独的数组，可以跟踪每个项目并对该数组重新排序，但是为此，我认为我需要为每个时钟添加一个ID，以使其与排序中的正确时钟绑定数组，并且需要在删除时钟后将其从该数组中删除，但是我不确定这是否是我的最佳选择。

对于在页面上的实际显示，我计划将CSS order属性与flexbox一起使用，以用户确定的顺序显示它们。

编辑：还应注意，我需要能够将订单保存在某处，以便下次加载应用程序时，它返回到用户设置的订单。

Answer 1

比方说，通过使用项目索引将项目的初始位置保持在单独的数组中：

let position = [0, 1, 2, 3];

现在，当用户按下第三项（index == 2）上的向上箭头时，您知道必须将位置数组中的第三项上移一个位置。（您可以根据屏幕上显示的项目的索引来确定按下了谁的向上箭头，而不是直接从ITEMS数组中查询它。这确保您不需要单独的ID字段。）< / p>

position = [0, 2, 1, 3];

因此，每当按下屏幕上的第二项时，您都知道必须向上/向下移动position数组的第二个（index == 1）元素。< / p>

那对你不起作用吗？

Answer 2

最好在每个对象中引入position属性，这样就不必管理新数组即可知道当前对象的位置

下面，我创建了showPositionedResults方法来通过position返回排序后的数组，并创建了changePosition方法来在用户单击上下箭头时通过+- 1来更改元素位置。< / p>

let clocks = [
  {
    clockLabel: 'My clock',
    position: 1
  },
  {
    clockLabel: 'My second clock',
    position: 2
  }
],
theDate = [
  {
    enabled: true,
    showYear: true,
    position: 3
  }
],
customMessage = [
  {
    enabled: true,
    text: 'My custom message',
    position: 4
  }
]

let combinedResult = [...clocks, ...theDate, ...customMessage]

let originalCopy = JSON.parse(JSON.stringify(combinedResult))

// show sorted results by position
function showPositionedResults() {
  return combinedResult.sort((a,b) => a.position - b.position)
}

console.log(showPositionedResults())

// change position by +- 1
function changePosition(position, up) {
  let el = combinedResult.find(d => d.position == position)
  if(up) {
    combinedResult.find(d => d.position == position-1).position += 1
    el.position -= 1
  } else {
    combinedResult.find(d => d.position == position+1).position -= 1
    el.position += 1
  }
}

// increase position 4 to 3
changePosition(4, true)
console.log(showPositionedResults())

// decrease position 1 to 2
changePosition(1, false)
console.log(showPositionedResults())

// original copy
console.log(originalCopy)

允许用户一起重新排序多个不同的对象

2 个答案: