@jay-js/system/draggable/index.js

A powerful and flexible TypeScript library for UI, state management, lazy loading, routing and managing draggable elements in modern web applications.

export function Draggable(element, { onDragStart, onDragEnd, onDragOver, onDragEnter, onDragLeave, onDrop } = {}) {
    let draggedItem = null;
    onDragStart && element.addEventListener("dragstart", (event)=>{
        draggedItem = event.target;
        onDragStart && onDragStart(event);
    });
    onDragEnd && element.addEventListener("dragend", onDragEnd);
    element.addEventListener("dragover", (event)=>{
        event.preventDefault();
        onDragOver && onDragOver(event);
    });
    onDragEnter && element.addEventListener("dragenter", onDragEnter);
    onDragLeave && element.addEventListener("dragleave", onDragLeave);
    onDrop && element.addEventListener("drop", (event)=>{
        onDrop(event, draggedItem);
    });
}