如何在react-dnd中将项目拖放到空白部分?

时间:2020-05-18 20:34:59

标签: javascript reactjs drag-and-drop react-dnd sortablejs

我正在尝试使用>>> regex = re.search('[A-Za-z ]+(in (?P<year>\d\d\d\d))?\s?(in (?P<country>[A-z]+))', line) >>> regex.groupdict() Traceback (most recent call last): File "<stdin>", line 1, in <module> AttributeError: 'NoneType' object has no attribute 'groupdict' 制作拖放列表。

我有一个工作示例:codesandbox example

我在这里有一个问题:

我不能将任何项目放在空白部分。

如果我们将>>> line = 'I am born in 2000' >>> regex = re.search('[A-Za-z ]+(in (?P<year>\d\d\d\d))\s?(in (?P<country>[A-z]+))?', line) >>> regex.groupdict() {'year': '2000', 'country': None} 移至第一或第三组,则无法返回第二组。我们也不能将项目放到组的最后一个位置(我们需要设置一个位置而不是最后一个位置,然后再移到最后一个位置),但是我认为这些问题是相关的。

我怀疑问题出在这里,react-dnd

image1

DragSource和DropTarget是相同的组件,因此,如果section中本身没有任何项目,那么那里就不是DrogTarget。

当我尝试将项目上移到DragItem.js时,整个部分(其中所有元素都在其中)是要拖动的元素,这也不是解决方案。

有什么想法吗?或者也许我必须使用其他工具来完成此任务?

2 个答案:

答案 0 :(得分:1)

似乎您将可拖动的卡片用作可丢弃的容器(因此没有卡片,无处可放)。

我以前使用react-dnd的方式是使用钩子useDrop ract-dnd use drop创建可放置容器,因此在这种情况下,我会将您的<div className="files-container">放入可放置容器。这样一来,您就可以将卡片放入空的容器中。

答案 1 :(得分:0)

最后,我决定使用其他程序包来解决此问题。相反,我使用了react-dnd react-sortablejs。在这种情况下,实施起来比较容易,并且可以满足我在这项任务中的所有期望。

工作示例:codesandbox example

谢谢!