创建类似于 codepen 的侧面板
Creating a side panel similar to code pen
我正在尝试在react中创建一个类似于codepen编辑器的侧面板，您可以在其中拖动以调整不同编辑器的大小。
如果我将编辑器 header 拖到底部足够低，它下面的编辑器将跟随，几乎就像我将该组件附加到拖动一样，同样，如果我尝试将 header 向上。我已经根据自己的喜好构建了布局，其概念与 material UI:
中的手风琴类似
https://mui.com/material-ui/react-accordion/
我还能够从 codepen 模仿 header 的点击行为，例如，双击将打开编辑器到全尺寸，三次点击将通过跟踪高度均匀打开useState 挂钩中的所有 'containers'。但是，我在拖动部分遇到了麻烦。我正在寻找一些有用的建议 libraries/ideas 来帮助我实现这一目标。
目前我正在使用 framer motion 使容器的扩展更多 'smooth'。
https://www.framer.com/docs/transition/
我注意到它们也有拖动功能，我也在探索。我的想法是为每个 header 设置一个 onDrag。根据我拖动的 header，如果我向下拖动直到我的容器大小为 0，我会开始缩小它下面的容器，然后再缩小它下面的容器，依此类推。我可以从 onDrag 函数获得 Y 属性，但我有点犹豫要不要在 x/y 坐标中进行计算。有没有人有任何建议或任何图书馆可以使这更容易？
我不知道任何图书馆。我想如果你走到这一步，你可能可以使用纯 js 自己完成，使用监听器和 selectors 等，或者任何反应可以提供的东西。有没有什么具体的事情让你“犹豫不决”？我最近发现这些对我来说让事情变得更容易，它们可能不是 100% 相关但仍然很高兴知道：getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
这将告诉相对于视口的位置，这对我在面板之间拖动分隔线很有用。
如果您需要相对于容器的位置：
如果你还没有，我想你可以看看使用“底部”（绝对位置或相对位置）设置面板 CSS 位置，然后将高度动画化为例如比上面板的底边小 30px。提示：拖动时，添加正文 class 以禁用用户 select: user-select: none;
我正在尝试在react中创建一个类似于codepen编辑器的侧面板，您可以在其中拖动以调整不同编辑器的大小。
如果我将编辑器 header 拖到底部足够低，它下面的编辑器将跟随，几乎就像我将该组件附加到拖动一样，同样，如果我尝试将 header 向上。我已经根据自己的喜好构建了布局，其概念与 material UI:
中的手风琴类似https://mui.com/material-ui/react-accordion/
我还能够从 codepen 模仿 header 的点击行为，例如，双击将打开编辑器到全尺寸，三次点击将通过跟踪高度均匀打开useState 挂钩中的所有 'containers'。但是，我在拖动部分遇到了麻烦。我正在寻找一些有用的建议 libraries/ideas 来帮助我实现这一目标。
目前我正在使用 framer motion 使容器的扩展更多 'smooth'。
https://www.framer.com/docs/transition/
我注意到它们也有拖动功能，我也在探索。我的想法是为每个 header 设置一个 onDrag。根据我拖动的 header，如果我向下拖动直到我的容器大小为 0，我会开始缩小它下面的容器，然后再缩小它下面的容器，依此类推。我可以从 onDrag 函数获得 Y 属性，但我有点犹豫要不要在 x/y 坐标中进行计算。有没有人有任何建议或任何图书馆可以使这更容易？
我不知道任何图书馆。我想如果你走到这一步，你可能可以使用纯 js 自己完成，使用监听器和 selectors 等，或者任何反应可以提供的东西。有没有什么具体的事情让你“犹豫不决”？我最近发现这些对我来说让事情变得更容易，它们可能不是 100% 相关但仍然很高兴知道：getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect 这将告诉相对于视口的位置，这对我在面板之间拖动分隔线很有用。 如果您需要相对于容器的位置： 如果你还没有，我想你可以看看使用“底部”（绝对位置或相对位置）设置面板 CSS 位置，然后将高度动画化为例如比上面板的底边小 30px。提示：拖动时，添加正文 class 以禁用用户 select: user-select: none;