3

I'm trying to make a drag and drop list using react-dnd.

I have a part-working example: codesandbox example

I have a one issue here:

I can't drop an item in an empty section.

If we move image1 to first or third group, we can't go back to second group. We also can't drop item to the last position of the group (we need to set a position other than the last one and then move to the last one), but I think these problems are related.

I suspect the problem lies here, in DragItem.js:

export default DropTarget(Types.FILE, fileTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({ shallow: true }),
  canDrop: monitor.canDrop(),
  itemType: monitor.getItemType()
}))(DragSource(Types.FILE, cardSource, collect)(DragItem));

DragSource and DropTarget are the same component, so if section has not any item in itself, it's not DrogTarget there.

When I tried to move the item higher to Project.js, the whole section (with all the elements inside) was one element to Drag, this is also not a solution.

Any ideas? Or maybe i have to use different tool to this task?

sosick
  • 624
  • 3
  • 17
  • 35

2 Answers2

1

It seems that you are using your draggable cards as droppable containers (so no card, nowhere to drop).

The way I used react-dnd before was creating droppable containers with the hook useDrop ract-dnd use drop so for this case I would make your <div className="files-container"> into a droppable container. That should allow you to drop cards into empty containers.

MarioLema
  • 39
  • 1
0

Finnally I decided to use a different package to solve this problem. Instead react-dnd I used react-sortablejs. It is easier to implement in this case and meets my all expectations in this task.

Working example: codesandbox example

Thanks!

sosick
  • 624
  • 3
  • 17
  • 35