1

我正在构建一个Trello替代方案，您可以在其中创建列表和任务。应该可以通过拖动元素来重新排序列表（水平）和列表中的任务（垂直）。

拖动列表时遇到问题，该列表中的任务未跟随父级：

Trello 替代原型

我一直试图弄清楚拖动传播在什么情况下不起作用，并制作了这个代码框：

import * as React from "react";
import { useState } from "react";
import { motion } from "framer-motion";

export const Example = () => {
  const [colors, setColors] = useState(initialColors);
  const [isDragging, setDragging] = useState(false);

  return (
    <motion.ul
      drag
      dragConstraints={{ top: 0, bottom: 0, right: 0, left: 0 }}
      dragElastic={0.5}
      style={{ background: "yellow" }}
    >
      {colors.map(background => (
        <motion.li
          key={background}
          drag
          dragConstraints={{ top: 0, bottom: 0, right: 0, left: 0 }}
          dragElastic={0.5}
          style={{ background }}
          // Uncomment this to get slightly different behavior
          // onDragStart={() => setDragging(true)}
          // onDragEnd={() => {
          //   setDragging(false);
          // }}
        />
      ))}
    </motion.ul>
  );
};

const initialColors = ["#FF008C", "#D309E1", "#9C1AFF", "#7700FF"];

拖拽破坏的简单示例

我认为我在这个简单的代码框示例中面临的问题可能与我的 Trello 替代应用程序中的问题相同。如果您取消注释onDragStartandonDragEnd行（它只是存储一个“拖动状态”布尔值，实际上没有将它用于任何事情），那么所有子框在其中一个被移动后停止跟随父拖动。

所以我的问题是：

如何使子组件可拖动，同时在拖动父容器时保留原始行为？如果可能的话，为什么会发生这种情况？

我尝试将dragPropogation道具添加到父级，但没有成功。

请注意，我使用的是最新发布的 Framer Motion 版本 2！ 我可以在版本 1.* 中很好地完成这项工作，但即使在那里我也偶然发现了一些问题，这让我想尝试在版本 2 中是否更容易

4

0 回答 0