{"id":13430771,"url":"https://github.com/feross/drag-drop","last_synced_at":"2025-04-08T09:09:11.070Z","repository":{"id":14711644,"uuid":"17432055","full_name":"feross/drag-drop","owner":"feross","description":"HTML5 drag \u0026 drop for humans","archived":false,"fork":false,"pushed_at":"2023-10-24T05:12:34.000Z","size":166,"stargazers_count":489,"open_issues_count":6,"forks_count":62,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-29T15:19:30.865Z","etag":null,"topics":["browser","browserify","drag-and-drop","drag-drop","html5","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feross.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-03-05T07:49:33.000Z","updated_at":"2024-09-23T10:32:40.000Z","dependencies_parsed_at":"2024-01-14T20:18:40.675Z","dependency_job_id":"fe28ec6e-6041-44c2-bd1d-0c5bd252898a","html_url":"https://github.com/feross/drag-drop","commit_stats":{"total_commits":215,"total_committers":17,"mean_commits":"12.647058823529411","dds":"0.13953488372093026","last_synced_commit":"7b8e5d9d0158f5f70296560c0d5e9e2a91acb144"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fdrag-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fdrag-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fdrag-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fdrag-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feross","download_url":"https://codeload.github.com/feross/drag-drop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809964,"owners_count":20999816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","browserify","drag-and-drop","drag-drop","html5","javascript"],"created_at":"2024-07-31T02:00:57.597Z","updated_at":"2025-04-08T09:09:11.036Z","avatar_url":"https://github.com/feross.png","language":"JavaScript","readme":"# drag-drop [![ci][ci-image]][ci-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]\n\n[ci-image]: https://img.shields.io/github/workflow/status/feross/drag-drop/ci/master\n[ci-url]: https://github.com/feross/drag-drop/actions\n[npm-image]: https://img.shields.io/npm/v/drag-drop.svg\n[npm-url]: https://npmjs.org/package/drag-drop\n[downloads-image]: https://img.shields.io/npm/dm/drag-drop.svg\n[downloads-url]: https://npmjs.org/package/drag-drop\n[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg\n[standard-url]: https://standardjs.com\n\n### HTML5 drag \u0026 drop for humans\n\nIn case you didn't know, the\n[HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)\nis a\n[total disaster](http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html)!\nThis is an attempt to make the API usable by mere mortals.\n\n### live demo\n\nSee [https://instant.io](https://instant.io).\n\n### features\n\n- simple API\n- supports files and directories\n- excellent browser support (Chrome, Firefox, Safari, Edge)\n- adds a `drag` class to the drop target on hover, for easy styling!\n- optionally, get the file(s) as a Buffer (see [buffer](https://github.com/feross/buffer))\n\n### install\n\n```\nnpm install drag-drop\n```\n\nThis package works in the browser with [browserify](https://browserify.org). If you do not use a bundler, you can use the [standalone script](https://bundle.run/drag-drop) directly in a `\u003cscript\u003e` tag.\n\n### usage\n\n```js\nconst dragDrop = require('drag-drop')\n\ndragDrop('#dropTarget', (files, pos, fileList, directories) =\u003e {\n  console.log('Here are the dropped files', files) // Array of File objects\n  console.log('Dropped at coordinates', pos.x, pos.y)\n  console.log('Here is the raw FileList object if you need it:', fileList)\n  console.log('Here is the list of directories:', directories)\n})\n```\n\nAnother handy thing this does is add a `drag` class to the drop target when the user\nis dragging a file over the drop target. Useful for styling the drop target to make\nit obvious that this is a drop target!\n\n### complete example\n\n```js\nconst dragDrop = require('drag-drop')\n\n// You can pass in a DOM node or a selector string!\ndragDrop('#dropTarget', (files, pos, fileList, directories) =\u003e {\n  console.log('Here are the dropped files', files)\n  console.log('Dropped at coordinates', pos.x, pos.y)\n  console.log('Here is the raw FileList object if you need it:', fileList)\n  console.log('Here is the list of directories:', directories)\n\n  // `files` is an Array!\n  files.forEach(file =\u003e {\n    console.log(file.name)\n    console.log(file.size)\n    console.log(file.type)\n    console.log(file.lastModifiedDate)\n    console.log(file.fullPath) // not real full path due to browser security restrictions\n    console.log(file.path) // in Electron, this contains the actual full path\n\n    // convert the file to a Buffer that we can use!\n    const reader = new FileReader()\n    reader.addEventListener('load', e =\u003e {\n      // e.target.result is an ArrayBuffer\n      const arr = new Uint8Array(e.target.result)\n      const buffer = new Buffer(arr)\n\n      // do something with the buffer!\n    })\n    reader.addEventListener('error', err =\u003e {\n      console.error('FileReader error' + err)\n    })\n    reader.readAsArrayBuffer(file)\n  })\n})\n```\n\n### get files as buffers\n\nIf you prefer to access file data as Buffers, then just require drag-drop like this:\n\n```js\nconst dragDrop = require('drag-drop/buffer')\n\ndragDrop('#dropTarget', files =\u003e {\n  files.forEach(file =\u003e {\n    // file is actually a buffer!\n    console.log(file.readUInt32LE(0))\n    console.log(file.toJSON())\n    console.log(file.toString('hex')) // etc...\n\n    // but it still has all the normal file properties!\n    console.log(file.name)\n    console.log(file.size)\n    console.log(file.type)\n    console.log(file.lastModifiedDate)\n  })\n})\n```\n\n### detect drag-and-dropped text\n\nIf the user highlights text and drags it, we capture that as a separate event.\nListen for it like this:\n\n```js\nconst dragDrop = require('drag-drop')\n\ndragDrop('#dropTarget', {\n  onDropText: (text, pos) =\u003e {\n    console.log('Here is the dropped text:', text)\n    console.log('Dropped at coordinates', pos.x, pos.y)\n  }\n})\n```\n\n### detect `dragenter`, `dragover` and `dragleave` events\n\nInstead of passing just an `ondrop` function as the second argument, instead pass an\nobject with all the events you want to listen for:\n\n```js\nconst dragDrop = require('drag-drop')\n\ndragDrop('#dropTarget', {\n  onDrop: (files, pos, fileList, directories) =\u003e {\n    console.log('Here are the dropped files', files)\n    console.log('Dropped at coordinates', pos.x, pos.y)\n    console.log('Here is the raw FileList object if you need it:', fileList)\n    console.log('Here is the list of directories:', directories)\n  },\n  onDropText: (text, pos) =\u003e {\n    console.log('Here is the dropped text:', text)\n    console.log('Dropped at coordinates', pos.x, pos.y)\n  },\n  onDragEnter: (event) =\u003e {},\n  onDragOver: (event) =\u003e {},\n  onDragLeave: (event) =\u003e {}\n})\n```\n\nYou can rely on the `onDragEnter` and `onDragLeave` events to fire only for the\ndrop target you specified. Events which bubble up from child nodes are ignored\nso that you can expect a single `onDragEnter` and then a single `onDragLeave`\nevent to fire.\n\nFurthermore, neither `onDragEnter`, `onDragLeave`, nor `onDragOver` will fire\nfor drags which cannot be handled by the registered drop listeners. For example,\nif you only listen for `onDrop` (files) but not `onDropText` (text) and the user\nis dragging text over the drop target, then none of the listed events will fire.\n\n### remove listeners\n\nTo stop listening for drag \u0026 drop events and remove the event listeners, just use the\n`cleanup` function returned by the `dragDrop` function.\n\n```js\nconst dragDrop = require('drag-drop')\n\nconst cleanup = dragDrop('#dropTarget', files =\u003e {\n  // ...\n})\n\n// ... at some point in the future, stop listening for drag \u0026 drop events\ncleanup()\n```\n\n### support pasting files from the clipboard\n\nTo support users pasting files from their clipboard, use the provided\n`processItems()` function to process the `DataTransferItemList` from the\nbrowser's native `'paste'` event.\n\n```js\ndocument.addEventListener('paste', event =\u003e {\n  dragDrop.processItems(event.clipboardData.items, (err, files) =\u003e {\n    // ...\n  })\n})\n```\n\n### a note about `file://` urls\n\nDon't run your app from `file://`. For security reasons, browsers do not allow you to\nrun your app from `file://`.  In fact, many of the powerful storage APIs throw errors\nif you run the app locally from `file://`.\n\nInstead, start a local server and visit your site at `http://localhost:port`.\n\n### license\n\nMIT. Copyright (c) [Feross Aboukhadijeh](http://feross.org).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeross%2Fdrag-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeross%2Fdrag-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeross%2Fdrag-drop/lists"}