React-beautiful-dnd: Allow granular control over which items can be combined

[DanielPower]

First of all, thank you for your work on this library. It's been exceptionally easy to use, and looks great.

I'm trying to implement a simple drag and drop file manager, with the option to drag files/folders into other folders, and one of the reasons I decided to go with this library is for the built-in combine functionality. Unfortunately, as far as I can tell, and as referenced here, it seems that I can't control what <Draggable>s can be dropped onto.

One solution could be to have some sort of shouldCombine function as a prop on the <Droppable>, or perhaps the <DragDropContext>, which takes in the source draggableId and the destination draggableId as arguments, and would return a boolean stating whether or not the combine succeeded. If the combine fails, the animation should show the <Draggable> move back to its original position, instead of sliding and fading into the <Draggable> it was dropped onto.

[alexreardon]

Fantastic suggestion!

[christoph-fricke]

Love this. The only thing that is holding me back from switching a work project from react-dnd to react-beautiful-dnd is the missing granular control for combining.

Having the built in keyboard support and beautiful animations would just be amazing.

@alexreardon Please make this happen as soon as possible. :heart:

My further discussion idea:
It would also be amazing to not just move the draggable back to it's original position but being able to show a visual indication to the user before the drop happens. This way a user would have a clearer understanding about what can be combined and what not.

[n0nama]

Fantastic suggestion!

Hello, Alex! Thank you very much for your beautiful course and examples for this library.
I also want to ask you to make changes with examples for standard file manager with main options.
It can be really usefull especially for dnd library.

[alexreardon]

Thanks for suggesting this and putting forward good use cases as well

It would be great to action this

[slavivanov]

I have been able to simulate this by updating a state variable in onDragUpdate, depending on what the user is hovering over.
It's not the most efficient implementation but will do until a native way is implemented.
EDIT: The code below caused "flickering", and had to be patched in a way that's too hacky to be used in production.

const FoldersDraggableNested = () => {
  const [canCombine, setCanCombine] = useState(true);

  return (
    <DragDropContext
        onDragUpdate={(initial) => {
          const combineWithId = initial.combine?.draggableId;

          // Custom logic to determine if the item being dragged over can be combined.
          // NB: combineWithId can be empty if dragging over empty space
          if (canCombine(combineWithId)) {
            // enable combining
            if (canCombine !== true) setCanCombine(true);
          } else {
            // disable combining
            if (canCombine !== false) setCanCombine(false);
          }
        }}
        <Droppable
          droppableId={'droppable-id'}
          isCombineEnabled={canCombine}
        >
           // ...
        </Droppable>
      </DragDropContext>
  );
};