问题标签 [react-beautiful-dnd]

我正在使用 react-beautiful-dnd

找不到任何更改可拖动点击区域的解决方案。当我单击自定义区域（而不是整个 Draggable 元素）时，我需要拖动项目。

例如，可拖动元素具有图标和文本。当我单击该元素的任何位置时，默认行为允许我拖动项目。

我只需要单击拖动元素的图标。 如何为拖动元素指定点击区域？

我正在使用 React Beautiful DND 库在列之间拖动项目（方形 div）或在同一列中重新排序。我按照他们的 Egghead 视频教程来更改 div 的背景颜色，因为它被拖动。当它被丢弃时，它会切换回所有其他项目的默认颜色。我希望它在掉落后慢慢褪色（可能像 1 秒）到默认颜色。

这是我当前拖放的 div 代码样式。我添加了过渡线，但没有做任何事情。

我尝试将此代码添加到onDragEnd事件中：

我使被拖动的订单 div 看起来像这样：

但是如果有人试图在不到 2 秒的时间间隔内拖动同一个项目，那将是错误的。

我将 Beautiful-DnD 用于一个项目，如果将某些项目拖放到不同的列中，单击按钮，它将用户重新路由到不同的页面。我在按钮不执行它的 onClick 功能时遇到问题。我相信这是由于我使用的 Beautiful-DnD 代码，但我无法确定原因。这是我的父组件：

这是 Beautiful-DnD 组件（DragNDrop 组件）

谢谢你的帮助！

我正在尝试在一个应用程序中同时使用 D3 并行 parcoords 和 Material-table。每个组件都可以单独运行。但是当它们一起渲染时，react-beautiful-dnd 内部会出现问题。D3 parallel parcoords 在内部使用 d3-dragging 包，material-table 使用 react-beautiful-dnd 包。

发生的问题如下。

我认为，因为每个组件中的 react-beautiful-dnd 和 d3-dragging 在渲染时会相互影响，所以会发生此问题。

这是我喜欢的例子，因为钩子。但我不想使用react-window包。试图删除它，最终没有运气。我怎样才能使这个示例像简单的板示例一样简约

I've been trying to implement my Reordering list inside my card using react-beautiful-dnd library but I tried everything in a similar way from egghead.io courses but could not get it working. Here's my code:

Also I'm attaching a photo, its just showing drag cursor on hovering over the card, but nothing happens on drag, any help will save me!

最初，元素可以从一列拖动到另一列，但在 2-3 个项目拖动后，某些索引上的项目停止拖动，就像我将一个项目从第 1 列索引 0 拖动到第 2 列索引 0，但是再尝试 1-2 次后，索引 0 项目停止移动，它停止拖动，而不同索引的项目移动。我无法理解其背后的原因，这是附加的代码。

初始数据：

我正在使用 react-beautiful-dnd 将团队成员拖放到不同的团队列表中。我有多个团队列表，以及一个添加新团队列表的按钮。添加 4 个团队后，我希望第 5 个团队列表位于第二行。

这可能吗？如果是这样，怎么做？目前，它水平延伸。从不同行重新排序列表不是优先事项，但是，我希望能够将团队成员拖放到不同行的团队列表中。

这是代码框： https ://codesandbox.io/s/teamlist-priwp?fontsize=14&hidenavigation=1&theme=dark

下面是我的代码，onDragEnd 事件没有触发

我在这里做错了什么。onDragEnd 事件未触发，

我在这里缺少的，下面是 onDragEnd 事件的代码片段

我正在尝试复制此处显示的 React Beautiful DnD 示例：https ://react-beautiful-dnd.netlify.app/?path=/story/board--large-data-set

该页面上大约有 500 个可拖动对象，但在拿起可拖动对象并移动它时延迟相对较小。

我复制这个例子的尝试可以在这里找到：https ://codesandbox.io/s/react-beautiful-dnd-stress-test-v50jl 。onDragEnd 尚未实现，因为现在我只关心拾取和移动滞后。

在我的版本中拾取项目时，可拖动对象开始移动大约需要 1 秒。可拖动对象的移动也非常紧张，因为它在可放置对象之间移动。

我已经尝试搜索官方示例的源代码，但找不到。我想知道我可以在我的代码中进行哪些优化以使其运行顺畅。