如何使用dnd-kit实现photoshop那样的可拖动工具栏效果？边缘检测实现细节是怎么样的？

Question

有没有现成的库的源码给我研究下。

据我自己实际体验，边缘检测长条矩形，是可以越过一点左内容区和右内容区的。
工具栏最外层，只有左右检测条。内部结构都是上下左右全部。
窗口左侧和右侧，分别有一个检测条。

若有2列工具栏之间，插入新的工具栏，检测条重叠应该没有影响，因为无论哪一个计算结果都是一样。

Answer 1

要使用dnd-kit实现可拖动工具栏效果，您需要进行以下步骤：

1.安装和设置dnd-kit库：您可以使用npm或yarn来安装dnd-kit。在您的项目中，您需要设置dnd-kit的上下文和提供拖动和放置的逻辑。

2.创建可拖动和放置的组件：您需要创建可拖动和放置的组件。对于可拖动组件，您可以使用dnd-kit提供的Draggable组件。对于放置组件，您可以使用Droppable组件。

3.定义拖动逻辑：在可拖动组件上，您需要定义拖动逻辑。这可能包括定义拖动开始和结束的回调，以及定义拖动过程中要传递给放置组件的数据。

4.定义放置逻辑：在放置组件上，您需要定义放置逻辑。这可能包括定义放置成功和失败的回调，以及定义何时接受拖动组件的数据。

5.实现边缘检测：为了实现Photoshop那样的效果，您需要在放置组件上实现边缘检测。您可以使用dnd-kit提供的useDroppableOverlay Hook来实现这一点。在Hook中，您可以定义何时启用边缘检测，并使用CSS样式来定义放置组件边缘的样式。