问题标签 [react-dnd]

我正在开发一个 TreeView 组件，我发现自己编写了大量代码来规避一个由使用 React-DnD 引起的相当简单的问题。

恰当的例子：当使用向上和向下箭头键导航树视图时，应该选择的节点并不总是同一级别的后继或前驱。例如，当向上移动并且同级别的前任是打开的并且有孩子时，可用性决定（至少对我而言）应该选择前任的最后一个孩子（或者实际上是最后一个可见的后代），因为这在视觉上是直接的先前选择的节点的前任。

当试图确定前任的后代（我们称之为“目标”节点）是打开还是关闭时，就会出现问题。该信息被维护在目标节点的状态中。

这就是问题所在：我为表示节点而创建的组件由 React-DnD 包装DragSource。但是，虽然 React-DnD 的包装机制提供了对包装组件属性的透明访问，但它的状态并非如此：DragSource 公开它自己的状态，但不提供对其包装组件的状态的访问。

结合包装器拦截ref包装组件的回调以传递其自己的实例而不是包装的事实，这意味着我根本无法访问节点的打开/关闭状态，即使我确切知道它们在哪里位置上。（实际上，在我开始使用 React-DnD 之前，我确实做到了这一点。）

我该如何处理这种情况？这可能是 React-DnD 的错误或疏忽，还是有办法访问我不知道的包装组件？

注意：似乎有一种方法可以访问包装的组件，但文档指出这是用于测试的。

我已经调整了react-dnd 可排序示例以在我的应用程序内部使用。

我无法使“不透明”跟随我的阻力。

当我最初选择元素时应用不透明度：

但是当我向上移动它以改变位置时，不透明度仍然应用于原始 DOM 元素（？）。

状态相应更改，表中与此状态关联的列正在重新排序。因此，除了不透明度之外，其他一切都运行良好。

当我移动元素时，只有 li 的值正在改变，但data-reactid位置没有改变。

我的应用程序中唯一的区别是我管理状态的方式。在我的应用程序中，状态是通过 redux 管理的。

传递给 DropTarget的hover函数基本上是示例中的复制和粘贴。

SortableColumnEntry 组件：

我成功地在反应组件中使用 react-dnd 来满足我正在处理的应用程序的要求。

所述组件还有一个显示简单模式窗口的按钮：

如您所见，此模式包含一个 div 元素，该元素正在侦听本机 html 拖放事件。我的问题是，显然这些本机事件以某种方式被 react-dnd 覆盖，使它们变得无用。

我通过从组件中消除所有 reeact-dnd 放置目标进行测试，正如我所料，本机事件现在正在工作。我怎样才能实现我期望的行为？

我正在阅读React-dnd 项目的示例：

这个 $splice 和这个页面上解释的一样吗？

谁能解释这段代码的作用？该$splice功能对我来说非常混乱。

在 arrayOf( < 在那个括号它给了我一个语法错误，但是看看文档似乎它应该是正确的，只是 PropTypes.array 似乎也可以正常工作，或者数字

我的包括：

这实际上只是来自 reactdnd 演示

我有一个显示多个页面的应用程序，这些页面是可拖动的。由于这些内容可能会变得很长，我只想显示页面名称并将页面的高度限制为 about 50pxonbeginDrag()并将高度重置为 auto on endDrag()。不幸的是，这不起作用，样式被忽略了。我认为这是因为 react-dnd 需要保持元素的比例，以便它可以处理放置目标并知道哪个组件在哪个位置。有没有其他方法可以做到这一点？

I have a top-level component that consists of a few different components.

• InventoryBox - designates the space that an inventory contains
• InventoryList - designates the list of items in the inventory
• Item - a single item in the inventory list

InventoryBox is the top-level component, so I have wrapped it in a DragDropContext. The issue I am running into is that the connectDragSource function that I specified in my collect function is not injecting the method into my item components.

My Collect Function

My Item Component

My ultimate goal would be to drag the Item components from the list to another Inventory Box.

我有一个类似 trello 的界面，在 React.js 中实现，带有很棒的ReactDnD库，它与默认的html5 后端配合得很好。我决定切换到触控后端来支持触控设备。

无论如何，当我切换时，它“工作”，但由于我的列表列和其中的卡片都是放置目标，这似乎导致这个触摸后端出现问题。我注意到的行为与完全忽略卡片作为放置目标的行为一致，并且始终认为放置目标是包含卡片的列表。

我认为发生这种情况的原因是，当我将一张卡片从一个列表拖到另一个列表时，如果我将卡片悬停在目标列表的中间并不重要，下拉标记为在列表的末尾，这是我将鼠标悬停在列表元素的空白区域时的预期行为。如果我将鼠标悬停在中间的一张卡片上，预期的行为是在该位置标记下降，将卡片向下移动一个位置。

我什至怀疑这与返回的结果不正确有关monitor.isOver({shallow: true})，正如我在此评论中对我提出的一个 github 问题所表达的那样，但正如那里正确陈述的那样，该方法不是每个后端都实现的。但也许它的实现使用了来自后端的东西。

这是提取到独立应用程序的示例：https ://github.com/gnapse/react-dnd-trello

它的行为如上所述。该回购中有两个提交。在初始提交时，应用程序使用 Html5 后端，并按预期工作。您可以签出该提交并查看它是如何工作的。然后，如果您再次结帐 master，您可以看到它与触摸后端一起工作。当您将一张卡片从列表中拖出，并且不将其拖回该列表时，无论您将其放在卡片列表中的哪个位置，它都将始终将放置标记在末尾，而不是在中间。

此外，触摸和鼠标事件都会发生这种情况。不过，我在 iPad 模拟器中对其进行了测试，而不是真实的。

我向the提交了一份问题报告，react-dnd-touch-backend但那里没有任何运气。我也考虑过向 repo 提交问题react-dnd，但由于这显然不是该项目中的错误，所以我决定在这里发布。

我是 React 新手，并按照本教程将 Drag'n'Drop 添加到我的应用程序

我正在按照教程一步一步地创建一个带有可拖动骑士棋子的棋盘，但无法让它工作（仍然无法拖动骑士）

});

谁能解释我做错了什么？

在这个 Angular 示例中，如果你将一个苹果拖到橙色部分并放在那里，那么会有一个动画慢慢地将苹果返回到它原来的位置。这在视觉上表明将苹果拖到橙色部分是无效的。使用的 Angular 拖放库来自codef0rmer。

我将如何在 react-dnd 或另一个 react 拖放包中创建类似的动画？

这是一个带有一些动画的 React 拖放示例。我可以用 react-dnd 或其他广泛使用的包做这样的事情吗？

其余的是 Angular 示例代码，它也在 plnkr Angular 示例中。

索引.html：

和 app.js：