@rast999/drag-and-drop

Drag and drop react

This package is an abstraction over HTML Drag and drop functionality. See standard. This is an internal package and it's not intended to be used by anyone except me since APIs can change anytime.

Sample usage

<div>
    // This is our Droppable container, only required prop is `handleDrop`
    <Droppable<{ src: string; description: string }>
        allowedTypes={['application/custom', 'files']}
        handleDrop={(data) => {
            if (data.items && data.items.length > 0) {
                setSrc(data.items[0]);
            }
        }}
        handleEnter={(data) => {
            data.dropzone?.classList.add('dragging');
        }}
        handleLeave={(data) => {
            data.dropzone?.classList.remove('dragging');
        }}
        className="dragzone"
    >
        <img height="300" src={src.src} alt={src.description} />
        <h3>{src.description}</h3>
    </Droppable>

    // And here are our draggable elements
    <div>
        {images.map((i) => (
            <Draggable
                type="application/custom"
                data={i}
                key={i.src}
                style={{
                    padding: '5px',
                    backgroundColor: 'red',
                    cursor: 'pointer',
                }}
                handleDragStart={(data) => {
                    data.target && (data.target.style.backgroundColor = 'blue');
                }}
                handleDragEnd={(data) => {
                    data.target && (data.target.style.backgroundColor = 'red');
                }}
            >
                <img src={i.src} height="75" alt={i.description} />
                <p>{i.description}</p>
            </Draggable>
        ))}
    </div>
</div>