{"id":22556246,"url":"https://github.com/substrate-system/drag-drop","last_synced_at":"2025-04-10T05:32:04.283Z","repository":{"id":265307432,"uuid":"892439019","full_name":"substrate-system/drag-drop","owner":"substrate-system","description":"HTML5 drag \u0026 drop for humans","archived":false,"fork":false,"pushed_at":"2025-03-20T21:04:48.000Z","size":52,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T06:51:44.882Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://substrate-system.github.io/drag-drop/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substrate-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-22T05:36:45.000Z","updated_at":"2025-02-24T22:47:49.000Z","dependencies_parsed_at":"2025-02-10T22:23:52.180Z","dependency_job_id":"c4c45a6e-193e-4d94-87ab-d36f492206e9","html_url":"https://github.com/substrate-system/drag-drop","commit_stats":null,"previous_names":["substrate-system/drag-drop"],"tags_count":8,"template":false,"template_full_name":"nichoth/template-ts-browser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fdrag-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fdrag-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fdrag-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fdrag-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/drag-drop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248163142,"owners_count":21057878,"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":[],"created_at":"2024-12-07T19:11:41.737Z","updated_at":"2025-04-10T05:32:04.240Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# drag drop\n![tests](https://github.com/substrate-system/drag-drop/actions/workflows/nodejs.yml/badge.svg)\n[![types](https://img.shields.io/npm/types/@substrate-system/drag-drop?style=flat-square)](README.md)\n[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)\n[![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/drag-drop?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/drag-drop)\n[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)\n[![license](https://img.shields.io/badge/license-Polyform_Non_Commercial-26bc71?style=flat-square)](LICENSE)\n\nSimplify the [drag \u0026 drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). Pass in a callback function, get drop events with a flat object of paths and files.\n\nInspired by [feross/drag-drop](https://github.com/feross/drag-drop) -- drag \u0026 drop usable by humans.\n\n[See a live demo](https://substrate-system.github.io/drag-drop/)\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eContents\u003c/h2\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [install](#install)\n- [Module format](#module-format)\n  * [ESM](#esm)\n  * [Common JS](#common-js)\n  * [pre-built JS](#pre-built-js)\n- [Get started](#get-started)\n  * [CSS](#css)\n- [API](#api)\n  * [types](#types)\n  * [Functions](#functions)\n  * [Directories](#directories)\n  * [Hidden files](#hidden-files)\n  * [Files](#files)\n- [test](#test)\n  * [Start a local example server](#start-a-local-example-server)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## install\n\n```sh\nnpm i -S @substrate-system/drag-drop\n```\n\n## Module format\nThis exposes ESM and common JS via the [package.json `exports` field](https://nodejs.org/api/packages.html#exports).\n\n### ESM\n```js\nimport { dragDrop } from '@substrate-system/drag-drop'\n```\n\n### Common JS\n```js\nconst { dragDrop } = require('@substrate-system/drag-drop')\n```\n\n### pre-built JS\nThis package exposes minified JS files too. Copy them to a location that is\naccessible to your web server, then link to them in HTML.\n\n#### copy\n```sh\ncp ./node_modules/@substrate-system/drag-drop/dist/index.min.js ./public/drag-drop.min.js\n```\n\n#### HTML\n```html\n\u003cscript type=\"module\" src=\"./drag-drop.min.js\"\u003e\u003c/script\u003e\n```\n\n----------------------------------------------------------------------\n\n## Get started\nThis exposes a single function, `dragDrop`. Pass in a callback function, and get data objects containing all the files or directories that were dropped. By default the callback will not see any [hidden files (dot files)](https://en.wikipedia.org/wiki/Hidden_file_and_hidden_directory#Unix_and_Unix-like_environments). Pass in another argument with `{ showHiddenFiles: true }` if you do want to see hidden files.\n\n```js\nimport { dragDrop, type DropRecord } from '@substrate-system/drag-drop'\n\n// pass in an element or a CSS query selector\ndragrop('.dropper',  (drop:DropRecord, { pos, files }) =\u003e {\n  console.log('drop position', pos)\n  // =\u003e { x: 100, y: 200 }\n\n  // drop a folder or file\n  console.log('the dropped files', drop)\n\n  // we get the FileList object from the event too\n  console.log('the file list', files)\n}, { showHiddenFiles: true })  // \u003c-- third argument is optional\n```\n\n### CSS\nWhen someone hovers and drops something, a class `.drag` is added to the drop target.\n\n```css\n.drag {\n  border: 5px solid red;\n}\n```\n\n-------------------------------------------------------------------------\n\n## API\n\n### types\n\n#### `DropRecord`\nA map from path name to file object.\n```ts\ntype DropRecord = Record\u003cstring, File|Uint8Array\u003e\n```\n\n##### example\n\n```js\n{ '/abc/123': aFile }\n```\n\n#### `Listener`\n\n```ts\ntype Listener = (dropped:DropRecord, opts:{\n    pos:{ x:number, y:number };\n    files:FileList;\n})=\u003eany\n```\n\n#### `ListenerObject`\n```ts\ntype ListenerObject = {\n    onDrop:Listener;\n    onDropText?:(text:string, pos:{ x, y })=\u003eany;\n    onDragEnter?:(event:DragEvent)=\u003eany;\n    onDragOver?:(event:DragEvent)=\u003eany;\n    onDragLeave?:(event:DragEvent)=\u003eany;\n}\n```\n\n### Functions\nA single function, `dragDrop`, that takes an element, a listener, an an options object.\n\nThe third argument has a property `showHiddenFiles`, which if `true` will callback with all files, including ones that start with `.`. By default is `false`.\n\n#### `dragDrop`\n```ts\nfunction dragDrop (\n    elem:HTMLElement|string,\n    listeners:Listener|ListenerObject,\n    opts?:{ showHiddenFiles?:boolean }\n):void\n```\n\n### Directories\nDrop a folder, get a flat object containing the files mapped by their path names.\n\nGiven a folder structure like this:\n```\nabc\n├── aaaaa\n│   └── bbb\n│       └── testbbb.txt\n└── test.txt\n\n3 directories, 2 files\n```\n\nIf we drop the top folder, `abc` into the drop zone, then we get an object like this:\n```js\n{\n    \"/abc/aaaaa/bbb/testbbb.txt\": File,\n    \"/abc/test.txt\": File\n}\n```\n\n#### Example\n\n```js\nimport { dragDrop, type DropRecord } from '@substrate-system/drag-drop'\n\ndragDrop('.dropzone', (drop:DropRecord, { pos } =\u003e {\n  debug('the drop', drop)\n\n  // =\u003e\n  // {\n  //   \"/abc/aaaaa/bbb/testbbb.txt\": {},\n  //   \"/abc/test2.txt\": {},\n  //   \"/abc/test.txt\": {}\n  // }\n}\n```\n\n### Hidden files\nPass in an options object with `{ showHiddenFiles: true }` to get results including dot files. By default this will **exclude hidden files** from the results.\n\n#### Example\n\n```js\nimport { dragDrop } from '@substrate-system/drag-drop'\n\ndragDrop('.dropzone', (dropRecord) =\u003e {\n  debug('including hidden files...', dropRecord)\n\n  // =\u003e\n  // {\n  //   \"/abc/.DS_Store\": {},\n  //   \"/abc/aaaaa/.DS_Store\": {},\n  //   \"/abc/aaaaa/bbb/testbbb.txt\": {},\n  //   \"/abc/test2.txt\": {},\n  //   \"/abc/test.txt\": {}\n  // }\n}, { showHiddenFiles: true })\n```\n\nThe returned object is a flat record with path names pointing at `File` objects.\n\n\n### Files\nDrop a single file, get an object with just the one file:\n\n```js\n{\n    \"/test.txt\": File\n}\n```\n\n## test\nDo manual testing, because it is difficult to mock the drop events.\n\n### Start a local example server\n\n```sh\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fdrag-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fdrag-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fdrag-drop/lists"}