Drag-N-Sort is a React DOM package designed to effortlessly add Drag and Drop functionality to both flex and grid containers, enabling innovative content sorting capabilities.
To install Drag-N-Sort, simply run:
npm i drag-n-dropin your project directory.
To implement Drag-N-Sort, utilize the Draggable component within your container div. Wrap your actual component with the Draggable component, ensuring uniformity of the section_id across all relevant Draggable objects.
<div className="flex relative gap-02" ref={ref}>
{array.map((element, _index) => (
<Draggable
parent_ref={ref}
onDrop={(id: number, direction: PlacementMarker) => console.log(id, direction)}
section_id={"array_one"}
vertical={false}
drag_only_button={false}
key={element.id}
>
<Component/>
</Draggable>
))}
</div>Upon rendering the page, users can click and hold to drag and drop items within the container (based on the children).
To segregate different groups of Draggable elements, utilize the section_id parameter to group Draggable elements, ensuring they interact only with elements sharing the same key.
<div className="flex relative gap-02" ref={ref}>
{array_of_array.map((element) => (
{element.array.map((sub_element) => (
<Draggable
parent_ref={ref}
onDrop={(id: number, direction: PlacementMarker) => console.log(id, direction)}
section_id={element.key}
vertical={false}
drag_only_button={false}
key={element.key}
>
<Component {...sub_element}/>
</Draggable>
)
))}
</div>To customize the click area, utilize the drag_only_button and drag_button parameters. By default, the click area targets the top right of the Draggable object, though this will change in future versions.
<div className="flex relative gap-02" ref={ref}>
{array.map((element, _index) => (
<Draggable
parent_ref={ref}
onDrop={(id: number, direction: PlacementMarker) => console.log(id, direction)}
section_id={"array_one"}
vertical={false}
drag_only_button={true}
drag_button={<img src="/icons/move.svg" alt="drag" className="icon" draggable={false}/>}
key={element.id}
>
<Component/>
</Draggable>
))}
</div>Depending on the website layout, you may prefer vertical drag and drop functionality over traditional horizontal. Toggle this using the vertical parameter.
<div className="flex column relative gap-02" ref={ref}>
{array.map((element, _index) => (
<Draggable
parent_ref={ref}
onDrop={(id: number, direction: PlacementMarker) => console.log(id, direction)}
section_id={"array_one"}
vertical={true}
drag_only_button={true}
drag_button={<img src="/icons/move.svg" alt="drag" className="icon" draggable={false}/>}
key={element.id}
>
<Component/>
</Draggable>
))}
</div>This simple type is passed into the onDrop callback, describing the element's position, especially when vertical is set to true.
export type PlacementMarker = 'left' | 'right' | 'top' | 'bottom'DraggableProps is a simple prop type for the Draggable component.
export type DraggableProps = {
children: ReactNode,
parent_ref: RefObject<HTMLElement>,
vertical?: boolean,
onDrop?: (index: number, position: PlacementMarker) => void
section_id?: string,
index?: number
drag_only_button?: boolean
drag_button?: ReactNode
}- Seamless integration with existing components and containers.
- Efficient Drag and Drop functionality for sorting elements on a page.
- Easy-to-use callback function.
- Not yet optimized for mobile (planned for future updates).
- Right-clicking may cause tracking issues.
- Drag button styling is not adjustable (planned for future updates).
