{"id":20791300,"url":"https://github.com/theprofs/drag-dropzone","last_synced_at":"2026-03-27T02:16:29.400Z","repository":{"id":58220542,"uuid":"95569965","full_name":"TheProfs/drag-dropzone","owner":"TheProfs","description":"Dropzone for files and DOM elements in Polymer 1.x","archived":false,"fork":false,"pushed_at":"2018-04-13T14:19:18.000Z","size":25,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-17T18:04:41.445Z","etag":null,"topics":["drag-and-drop","dropzone","polymer"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheProfs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-27T14:55:48.000Z","updated_at":"2018-04-13T14:19:19.000Z","dependencies_parsed_at":"2022-08-31T02:51:00.421Z","dependency_job_id":null,"html_url":"https://github.com/TheProfs/drag-dropzone","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProfs%2Fdrag-dropzone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProfs%2Fdrag-dropzone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProfs%2Fdrag-dropzone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheProfs%2Fdrag-dropzone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheProfs","download_url":"https://codeload.github.com/TheProfs/drag-dropzone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243136238,"owners_count":20241988,"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":["drag-and-drop","dropzone","polymer"],"created_at":"2024-11-17T15:43:07.578Z","updated_at":"2025-12-25T06:44:45.526Z","avatar_url":"https://github.com/TheProfs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/TheProfs/drag-dropzone.svg?branch=master)](https://travis-ci.org/TheProfs/drag-dropzone)\n\n# \\\u003cdrag-dropzone\\\u003e\n\n```bash\n$ bower install --save drag-dropzone\n```\n\n## What's cool\n\n- Includes and implements `dragDropzoneBehavior` which can be attached to\nany element. You can either use the element itself, or just the behavior.\n- Lightweight, has **0** dependencies\n- Handles both `Files` and draggable `DOMElements`\n- Handles `paste` as well\n\n## Basic Usage\n\n```html\n\u003cdrag-dropzone\u003e\u003c/drag-dropzone\u003e\n\n\u003cscript\u003e\n  document.querySelector('drag-dropzone').addEventListener('item-dropped', e =\u003e {\n    console.log(e.detail); // Logs items and drop position\n  })\n\u003c/script\u003e\n```\n\n## Usage with DOM elements\n\nJust make sure your DOM elements declare the following:\n\n- `allow-drop=true`\n- `type=\"DOMElement\"`\n- The `data` you want to receive when it's dropped on the drop zone.\n\n```html\n\u003cdiv ondragstart=\"drag(event)\" draggable=\"true\"\u003eDraggable thingy\u003c/div\u003e\n\u003cdrag-dropzone\u003e\u003c/drag-dropzone\u003e\n\n\u003cscript\u003e\n  function drag(e) {\n    e.dataTransfer.setData('allow-drop', true);\n    e.dataTransfer.setData('type', 'DOMElement');\n    e.dataTransfer.setData('data', 'foo-bar');\n  }\n\n  document.querySelector('drag-dropzone').addEventListener('item-dropped', e =\u003e {\n    console.log(e.detail); // Logs items and drop position\n  })\n\u003c/script\u003e\n```\n\n## Restricting file types\n\nSet an `accept` attribute with a comma-separated `String` of the types\nit should accept.\n\n```html\n\u003cdrag-dropzone accept=\"application/pdf, image/png\"\u003e\u003c/drag-dropzone\u003e\n\n\u003cscript\u003e\n  // Assuming you dropped anything other than a PNG or PDF\n  document.querySelector('drag-dropzone').addEventListener('item-error', e =\u003e {\n    console.log(e.detail.text); // Logs 'Unsupported file type'\n  })\n\u003c/script\u003e\n```\n\n## Using the Behavior\n\nThe element includes `dragDropzoneBehavior` which can be easily attached to\nany element.\n\n```html\n\u003cdom-module id=\"my-element\"\u003e\n  \u003ctemplate\u003e\n    \u003cstyle\u003e\n      :host {\n        display: block;\n        text-align: center;\n        padding: 1em;\n      }\n    \u003c/style\u003e\n    \u003clabel hidden$=\"[[!itemDragged]]\"\u003eDrop Here\u003c/label\u003e\n  \u003c/template\u003e\n\n  \u003cscript\u003e\n    Polymer({\n\n      is: 'my-element',\n\n      behaviors: [\n        dragDropBehavior\n      ]\n    });\n  \u003c/script\u003e\n\u003c/dom-module\u003e\n```\n\n## Gotchas\n\n#### The `paste` event is attached on `window`.\n\nIf you have more than one dropzone per page, the `item-dropped` event will\nbe fired from all `\u003cdrag-dropzone\u003e` elements when pasting.\n\nIn that case it makes sense to [debounce][2] the event so you handle it\nonly *once*.\n\n```javascript\ndocument.querySelector('drag-dropzone').addEventListener('item-dropped', e =\u003e {\n  debounce(() =\u003e {\n    // handle event\n  }, 200);\n})\n```\n\nThere's an open [Issue][3] for the paste issues.\n\n## Running Tests\n\n```\n$ npm install -g polymer-cli\n$ polymer test\n```\n\n## Authors\n\n- Nicholas Kyriakides, [@nicholaswmin][1], nik.kyriakides@gmail.com\n\n## License\n\n\u003e Copyright (c) 2017 The Profs LTD\n\n\u003e Permission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\n\u003e The above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\n\u003e THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n[1]: https://github.com/nicholaswmin\n[2]: https://davidwalsh.name/javascript-debounce-function\n[3]: https://github.com/TheProfs/drag-dropzone/issues/3\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheprofs%2Fdrag-dropzone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheprofs%2Fdrag-dropzone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheprofs%2Fdrag-dropzone/lists"}