使用 useSprings hook (+useDrag) 将元素独立拖动到新位置答案

【问题标题】：Dragging elements to new positions independently using useSprings hook (+useDrag)使用 useSprings hook (+useDrag) 将元素独立拖动到新位置
【发布时间】：2022-04-13 04:20:49
【问题描述】：

我希望每个元素都能根据其最新定位独立更新。但是，在移动另一个元素之后再移动一个元素会导致这种不需要的行为。

export function Ingredients({ ingredients }: IngredientsProps) {
  const [springs, api] = useSprings(ingredients.length, () => ({
    x: 0,
    y: 0,
  }));
  const bind = useDrag(({ args: [originalIndex], offset: [ox, oy] }) => {
    api.start((index) => {
      if (index !== originalIndex) return;

      return {
        x: ox,
        y: oy,
      };
    });
  });

  return (
    <>
      {springs.map(({ x, y }, i) => (
        <Ingredient key={ingredients[i].name} {...bind(i)} style={{ x, y }}>
          <img
            src={ingredients[i].src}
            alt={ingredients[i].name}
            draggable="false"
          ></img>
        </Ingredient>
      ))}
    </>
  );
}

【问题讨论】：

标签： reactjs react-spring react-use-gesture

【解决方案1】：

将from 属性添加到通用选项：

export function Ingredients({ ingredients }: IngredientsProps) {
  const [springs, api] = useSprings(ingredients.length, () => ({
    x: 0,
    y: 0,
  }));
  const bind = useDrag(({ args: [originalIndex], offset: [ox, oy] }) => {
    api.start((index) => {
      if (index !== originalIndex) return;

      return {
        x: ox,
        y: oy,
      };
    });
  },
  {
    from: ({args: [originalIndex]}) => [
        springs[originalIndex].x.get(),
        springs[originalIndex].y.get()
    ],
  });

  return (
    <>
      {springs.map(({ x, y }, i) => (
        <Ingredient key={ingredients[i].name} {...bind(i)} style={{ x, y }}>
          <img
            src={ingredients[i].src}
            alt={ingredients[i].name}
            draggable="false"
          ></img>
        </Ingredient>
      ))}
    </>
  );
}

【讨论】：