Providing additional props in DragEndEvent

[airtable-JayRansijn]

As far as I know, there are only id properties one a drag end event. This becomes a bit limiting for more complex drag-and-drop interfaces, especially with tree like structures. Since all the logic becomes centralized in the onDragEnd event.

It would be nice to be able to add additional properties besides the id. Or alternatively, provide drop logic in the droppable component itself. In that world, components can decide how to update the data structure instead of at the top level.

[clauderic]

Hey @airtable-JayRansijn, this is planned, just haven't had a chance to make time to work on this yet. Refer to this discussion #139 (comment)

[airtable-JayRansijn]

Thanks for the update! Not sure how I missed those issues.

[clauderic]

As of version ^3.0.0 of @dnd-kit/core, the data argument for useDraggable and useDroppable is now exposed in event handlers and on the active and over objects.

Example usage:

import {DndContext, useDraggable, useDroppable} from '@dnd-kit/core';

function Draggable() {
  const {attributes, listeners, setNodeRef, transform} = useDraggable({
    id: 'draggable',
    data: {
      type: 'type1',
    },
  });

  /* ... */
}

function Droppable() {
  const {setNodeRef} = useDroppable({
    id: 'droppable',
    data: {
      accepts: ['type1', 'type2'],
    },
  });

  /* ... */
}

function App() {
  return (
    <DndContext
      onDragEnd={({active, over}) => {
        if (over?.data.current.accepts.includes(active.data.current.type)) {
          // do stuff
        }
      }}
    />
  );
}

Refer to https://docs.dndkit.com/api-documentation/droppable/usedroppable#data and https://docs.dndkit.com/api-documentation/draggable/usedraggable#data for more details.

[growthwp]

Thanks. Currently writing some CSBs as tests for the use-case where you have "outside" draggables, as well as different types of draggables within the same context that need to be discerned and it's looking good. Will post once they're done.