https://github.com/loopmode/dnd-details
retrieve details from a DragEvent after drop
https://github.com/loopmode/dnd-details
Last synced: 4 months ago
JSON representation
retrieve details from a DragEvent after drop
- Host: GitHub
- URL: https://github.com/loopmode/dnd-details
- Owner: loopmode
- Created: 2018-08-06T12:01:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-06T16:08:08.000Z (over 7 years ago)
- Last Synced: 2025-10-05T04:13:13.360Z (6 months ago)
- Language: JavaScript
- Size: 165 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dnd-details
Takes a `DragEvent` object and returns information about the dropped content.
## Installation
```bash
yarn add dnd-details
```
## Resources
- [Documentation](https://loopmode.github.io/dnd-details/)
- [npm page](https://www.npmjs.com/package/dnd-details)
## Usage
```javascript
import dndDetails from 'dnd-details';
...
onDrop(event) {
const details = dndDetails(event);
console.log(details);
}
```
## Returned object
The returned object has the shape
```javascript
export interface IDropDetails {
files: FileList;
links: string[];
images: string[];
text: string;
html: string;
}
```
### 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)`