solid-dnd

The library provides several primitives and features for building complex drag and drop interfaces:

• Draggables: Use createDraggable to integrate drag behavior into elements while maintaining full control over their appearance.
• Droppables: Use createDroppable to manage drop zones. These can be conditionally enabled or disabled based on the current context.
• DragOverlay: Use this component when you want to drag a visual representation of an element that is removed from the normal document flow.
• Sensors: Supports different sensors for detecting drag interactions (a pointer sensor is provided by default).
• Collision Detection: Includes built-in layout collision algorithms: mostIntersecting, closestCorners, and closestCenter. You can also implement custom algorithms.
• Sortable Lists: Provides primitives for reordering lists (currently supports vertical sorting).
• Isolation: You can use multiple or nested DragDropProvider instances to create isolated drag and drop containers.

To implement drag and drop, you need to wrap your application in a DragDropProvider and DragDropSensors. Use createDraggable for elements that can be moved and createDroppable for target areas. Use the useDragDropContext hook to listen for events like onDragEnd.

Note: solid-dnd does not automatically move a draggable into a droppable on drop; you are responsible for updating your application state to reflect the new position or ownership.

import {
  DragDropProvider,
  DragDropSensors,
  useDragDropContext,
  createDraggable,
  createDroppable,
} from "@thisbeyond/solid-dnd";

const Draggable = (props) => {
  const draggable = createDraggable(props.id);
  return <div use:draggable>draggable</div>;
};

const Droppable = (props) => {
  const droppable = createDroppable(props.id);
  return <div use:droppable>droppable</div>;
};

const Sandbox = () => {
  const [, { onDragEnd }] = useDragDropContext();

  onDragEnd(({draggable, droppable}) => {
    if (droppable) {
      // Handle the drop. Note that solid-dnd doesn't move a draggable into a
      // droppable on drop. It leaves it up to you how you want to handle the
      // drop.
    }
  });

  return (
    <div>
      <Draggable id="draggable-1" />
      <Droppable id="droppable-1" />
    </div>
  );
};

const App = () => {
  return (
    <DragDropProvider>
      <DragDropSensors>
        <Sandbox />
      </DragDropSensors>
    </DragDropProvider>
  );
};

export default App;

A CollisionDetector is a function type used to determine which Droppable target a Draggable element is currently colliding with. You can implement your own logic to decide how collisions are calculated based on the spatial relationship between the draggable and the available droppables.

A CollisionDetector must follow this signature:

( 
  draggable: Draggable, 
  droppables: Droppable[], 
  context: { activeDroppableId: Id | null } 
) => Droppable | null;

• draggable: The current state of the element being dragged, including its transformed layout.
• droppables: An array of all available drop targets.
• context: Contains the activeDroppableId, which can be used as a tie-breaker to prioritize the currently active target if multiple targets are equally valid.

type CollisionDetector = (
  draggable: Draggable,
  droppables: Droppable[],
  context: { activeDroppableId: Id | null }
) => Droppable | null;