标签: dnd-kit

我正在尝试使用 React dnd-kit 构建一个非常基本的可排序，并且一切正常，除了一件事：可排序数组的第一个元素在拖动时不会移动（当在其上拖动其他元素时它会移动，这让这变得更奇怪）。

这是带有项目的 CodeSandBox ： https://codesandbox.io/s/condescending-wright-scyqvo? file=/src/components/Item.js

希望有人能帮助我，非常感谢:)

我遵循了dnd kit React 库的快速入门，它让我可以用鼠标很好地拖放。但是，当我尝试在 Android 上使用 Chrome 的同一页面时，我无法拖动该项目。看起来它开始移动，然后当我的手指移出其原始边界时就被卡住了。

我尝试切换到拖动叠加，但这似乎没有任何区别。

如何使用 dnd 套件支持触摸用户？

我的可排序项目包含一个链接，因此当我单击它进行拖放时。问题是我放下后，它导航到该链接。我怎样才能防止这种情况发生？

当我交换网格上的两个遥远的项目时，它会“重做”交换动画（向后然后再次向前）。当物品非常接近时，效果很好，如下面的 gif 所示：

我已经遵循了Sortable 文档，但我不明白为什么它要重做动画。我只想将它放在网格单元上并将旧项目保留在它已经所在的位置，而不是再次执行动画

这是代码示例的链接

我一直在尝试为 React 实现一个名为dnd-kit的拖放库。

我一直在使用覆盖排序列表指南的帮助下研究一个非常基本的示例，但它不起作用，我不知道我做错了什么。

这是沙箱代码

动画无法正常工作，如果我与第一行交互，它就会冻结并完全停止工作。

有什么帮助吗？

经过一段时间的使用和作者的一些输入后，我让它工作得更好了一些，并发现组件 DragOverlay 导致了我目前无法解决的问题。

如果 DragOverlay 被删除或移动到 DndContext 之外，它可以很好地排序，但没有覆盖效果。

我对dnd-kit库有疑问。我正在尝试使用拖动手柄激活器实现可排序列表。问题是我无法将拖动手柄（按钮）设置为仅拖动激活器。相反，整个父元素保持活动状态。

SortableItem成分：

    const SortableItem: FunctionComponent<{ id: string }> = (props) => {
      const {
        attributes,
        listeners,
        setNodeRef,
        setActivatorNodeRef,
        transform,
        transition,
      } = useSortable({ id: props.id });


      const context: Context = {
        attributes: attributes,
        listeners: listeners,
        setActivatorNodeRef: setActivatorNodeRef
      }


      return (
        <SortableItemContext.Provider value={context}>
          <div ref={setNodeRef} {...attributes} {...listeners}>
            {props.children}
          </div>
        </SortableItemContext.Provider>
      );
    }

DragHandle成分：

    export const DragHandle: FunctionComponent = () => {

      const { attributes, listeners, setActivatorNodeRef } = useContext(SortableItemContext);
      return <button type="button"
                     className="DragHandle"
                     {...attributes} {...listeners}
                     ref={setActivatorNodeRef}>
        <svg viewBox="0 …