Free Form Drag

[mrm2234]

Hi All - I'm new to dnd-kit and am trying to make something draggable like this example in the docs - https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/core-draggable-hooks-usedraggable--snap-to-grid

I'm having a hard time getting the item to drop where it was dragged - does anyone have a working example?

Also, I was a bit unsure of whether we needed a droppable component - does simply dragging it around have to be enclosed within a droppable?

Thanks!

[SirajChokshi]

This thread is old, but for posterity:

You have to keep track of the draggable's new position yourself. The Storybook example uses an event handler for onDragEnd on the <DndContext /> provider. It's a little frustrating that this isn't mentioned in the docs and the default behavior on Storybook is not the default behavior of the library.

You'd need to create a reducer that takes advantage of useDraggable data to handle cases where you need more than one draggable element.

Example for one draggable element:

function MyComponent() {
    const [position, setPosition] = useState<{x: number; y: number}>({ x: 0, y: 0 });
    
    return <DndContext
         onDragEnd={({ delta }) => {
              setPosition(currentPosition => {
                   const newX = position.x + delta.x
                   const newY = position.y + delta.y

                   return { x: newX, y: newY }
              }
         }}
    >
        {/* Where draggable's position is controlled by prop `position` */}
        <Draggable position={position} />
     </DndContext>