Question

对于富有创造力的问题解决者以及经历过多范围滑块的人来说，

我正在尝试构建一个工具，使用户能够以特定顺序将项目放置在时间轴上。这些项目将具有相对于时间的范围。用户还可以在时间轴上拉伸这些项目的时间范围。

为了展示我的意思，我做了这个快速的模型：

对象看起来像这样：

new Recipe = [
  { id: 1, timeStart: 6, timeEnd: 8},
  { id: 2, timeStart: 2, timeEnd: 6},
  { id: 3, timeStart: 18, timeEnd: 22}]

我以前能够拖放数组中的项目以特定顺序重新排列它们，但是我从未见过任何插件，这些项目可以是单个范围滑块。

我知道这确实是自定义的，但我正在尝试找到一些技巧，以解决这个问题。谢谢大家。

Answer 1

您说您已经能够将项目拖放到数组中以更改其顺序，并且您所描述的内容应该没有什么不同。

在所有使用拖放的情况下，实际上只不过是拖放数据对象。丢弃的数据指定时间范围没关系-这仅对所讨论项目的呈现很重要，您应该将其封装到某种形式的TimeRangeItem组件中。

另外，解决此问题的另一种方法是使数据反映开始时间和持续时间而不是结束时间。这样，拖放操作就不需要更改数组中项目的顺序，因为任何被删除的项目都只会更新项目的开始时间。