Wondering what’s next for npm?Check out our public roadmap! »

    dnd-details
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    dnd-details

    Takes a DragEvent object and returns information about the dropped content.

    Installation

    yarn add dnd-details

    Resources

    Usage

    import dndDetails from 'dnd-details';
     
    ...
     
    onDrop(event) {
        const details = dndDetails(event);
        console.log(details);
    }

    Returned object

    The returned object has the shape

    export interface IDropDetails {
        filesFileList;
        linksstring[];
        imagesstring[];
        textstring;
        htmlstring;
    }

    Dragging from desktop

    When files were dragged in from the local filesystem, the files list will be populated. None of the other values will be populated.

    Dragging from other browser windows

    When dragging content from other browser windows, the files list will always be empty, but several of the other values will be populated.

    • When a single link is dragged, text should contain the displayed text of the link, and links should have one entry with the href URL of the link
    • When a single image is dragged, images should have one entry with the src URL of the image
    • When a linked image is dragged, both links and images should be populated
    • When dragging in entire websites, e.g. Ctrl+A then drag and drop, you might have the data for many images and links
    • The links and images arrays will always exist, even if they're empty. So it's safe write code like if (details.images.length > 0) and you don't need if (details.images && details.images.length > 0)

    Install

    npm i dnd-details

    DownloadsWeekly Downloads

    1

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    524 kB

    Total Files

    60

    Last publish

    Collaborators

    • avatar