{"_id":"@dragdroptouch/drag-drop-touch","_rev":"3-44ebdc21d3739e7bad21949aa3bb8241","name":"@dragdroptouch/drag-drop-touch","dist-tags":{"latest":"2.0.3"},"versions":{"2.0.2":{"name":"@dragdroptouch/drag-drop-touch","version":"2.0.2","keywords":["html5","drag","drop","mobile","touch"],"author":{"url":"https://github.com/Bernardo-Castilho","name":"Bernardo Castilho"},"license":"MIT","_id":"@dragdroptouch/drag-drop-touch@2.0.2","maintainers":[{"name":"pomax","email":"pomax@nihongoresources.com"}],"contributors":[{"url":"https://www.rozek.de/","name":"Andreas Rozek","email":"a.rozek@gmx.de"},{"url":"https://pomax.github.io","name":"Pomax","email":"pomax@nihongoresources.com"}],"homepage":"https://github.com/Bernardo-Castilho/dragdroptouch#readme","bugs":{"url":"https://github.com/Bernardo-Castilho/dragdroptouch/issues"},"dist":{"shasum":"3270fae6f3829790c0009b624e4bc60bf278a5e6","tarball":"https://registry.npmjs.org/@dragdroptouch/drag-drop-touch/-/drag-drop-touch-2.0.2.tgz","fileCount":5,"integrity":"sha512-i8KqaYoXRyq4qnxqv755QzvaQqbNzDsc8zQodVbh7feTTV3hnxF1vABs2J8QX1lEDcD9X2b4d0kgaqLNA8tQYw==","signatures":[{"sig":"MEUCIQC12D7PDJu583I7OzxTx5egR/GE2UHAWB4CbBoziiBDCwIgeHcVArH3BYHOScon25rXQamzRiW97kEPK2j3kOhRB/E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33256},"main":"dist/drag-drop-touch.esm.js","type":"module","gitHead":"0768ced4470f74c110fb281555e61cd2f90278d0","scripts":{"lint":"tsc --noEmit --target esnext --module esnext ts/drag-drop-touch.ts","test":"npm run start -- -- --test && npm run test:cleanup","build":"npm run lint && npm run format && npm run build:esm:debug && npm run build:esm && npm run build:min","start":"npm run build && npm run server","format":"prettier -w ts/*.ts","server":"node server.js","build:esm":"npm run build:base -- --drop-labels=DEBUG --outfile=dist/drag-drop-touch.esm.js","build:min":"npm run build:base -- --drop-labels=DEBUG --minify --outfile=dist/drag-drop-touch.esm.min.js","dev:setup":"playwright install","build:base":"esbuild --bundle --format=esm ./ts/drag-drop-touch.ts","test:debug":"npm run start -- -- --test  --debug && npm run test:cleanup","test:cleanup":"rm -rf test-results","build:esm:debug":"npm run build:base -- --outfile=dist/drag-drop-touch.debug.esm.js","test:integration":"playwright test tests --workers=1 --timeout 5000 --global-timeout 15000"},"_npmUser":{"name":"pomax","email":"pomax@nihongoresources.com"},"repository":{"url":"git+https://github.com/Bernardo-Castilho/dragdroptouch.git","type":"git"},"_npmVersion":"10.8.2","description":"A polyfill that enables HTML5 drag-and-drop support for touch devices","directories":{},"_nodeVersion":"22.8.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.23.0","express":"^4.19.2","prettier":"^3.3.3","playwright":"^1.45.2","typescript":"^5.5.4","@playwright/test":"^1.45.2"},"_npmOperationalInternal":{"tmp":"tmp/drag-drop-touch_2.0.2_1749834861537_0.7136189644417956","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"@dragdroptouch/drag-drop-touch","version":"2.0.3","keywords":["html5","drag","drop","mobile","touch"],"author":{"url":"https://github.com/Bernardo-Castilho","name":"Bernardo Castilho"},"license":"MIT","_id":"@dragdroptouch/drag-drop-touch@2.0.3","maintainers":[{"name":"pomax","email":"pomax@nihongoresources.com"}],"contributors":[{"url":"https://www.rozek.de/","name":"Andreas Rozek","email":"a.rozek@gmx.de"},{"url":"https://pomax.github.io","name":"Pomax","email":"pomax@nihongoresources.com"}],"homepage":"https://github.com/Bernardo-Castilho/dragdroptouch#readme","bugs":{"url":"https://github.com/Bernardo-Castilho/dragdroptouch/issues"},"dist":{"shasum":"22ce219472ae81a92c7671f6b84b0e7e041726b1","tarball":"https://registry.npmjs.org/@dragdroptouch/drag-drop-touch/-/drag-drop-touch-2.0.3.tgz","fileCount":5,"integrity":"sha512-4Yv1+S2Yxs/5iYLZyZYobAlCvIJPN6TYBjvJDyI9kH30GfBxA+ffHgKK2l00EyyBlUpB10j8BWAbRsgXRtBbPw==","signatures":[{"sig":"MEQCIFQnYCN60Q/LHuZDn6Co6Cx3r6UFk16o4tpHmkBPfBPRAiASnqONRCvn4FckOVyRq2cl8uykCkbIEOce0od/m16GNQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33935},"main":"dist/drag-drop-touch.esm.js","type":"module","gitHead":"31f0c0fe6898b886445f75b7c3fdda53f25846ed","scripts":{"lint":"tsc --noEmit --target esnext --module esnext ts/drag-drop-touch.ts","test":"npm run start -- -- --test && npm run test:cleanup","build":"npm run lint && npm run format && npm run build:esm:debug && npm run build:esm && npm run build:min","start":"npm run build && npm run server","format":"prettier -w ts/*.ts","server":"node server.js","build:esm":"npm run build:base -- --drop-labels=DEBUG --outfile=dist/drag-drop-touch.esm.js","build:min":"npm run build:base -- --drop-labels=DEBUG --minify --outfile=dist/drag-drop-touch.esm.min.js","dev:setup":"playwright install","build:base":"esbuild --bundle --format=esm ./ts/drag-drop-touch.ts","test:debug":"npm run start -- -- --test  --debug && npm run test:cleanup","test:cleanup":"rm -rf test-results","build:esm:debug":"npm run build:base -- --outfile=dist/drag-drop-touch.debug.esm.js","test:integration":"playwright test tests --workers=1 --timeout 5000 --global-timeout 15000"},"_npmUser":{"name":"pomax","email":"pomax@nihongoresources.com"},"repository":{"url":"git+https://github.com/Bernardo-Castilho/dragdroptouch.git","type":"git"},"_npmVersion":"10.8.2","description":"A polyfill that enables HTML5 drag-and-drop support for touch devices","directories":{},"_nodeVersion":"22.8.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.23.0","express":"^4.19.2","prettier":"^3.3.3","playwright":"^1.45.2","typescript":"^5.5.4","@playwright/test":"^1.45.2"},"_npmOperationalInternal":{"tmp":"tmp/drag-drop-touch_2.0.3_1749835556281_0.9205615855058009","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-06-13T17:14:21.480Z","modified":"2025-06-16T22:40:25.794Z","2.0.2":"2025-06-13T17:14:21.723Z","2.0.3":"2025-06-13T17:25:56.484Z"},"bugs":{"url":"https://github.com/Bernardo-Castilho/dragdroptouch/issues"},"author":{"url":"https://github.com/Bernardo-Castilho","name":"Bernardo Castilho"},"license":"MIT","homepage":"https://github.com/Bernardo-Castilho/dragdroptouch#readme","keywords":["html5","drag","drop","mobile","touch"],"repository":{"url":"git+https://github.com/Bernardo-Castilho/dragdroptouch.git","type":"git"},"description":"A polyfill that enables HTML5 drag-and-drop support for touch devices","contributors":[{"url":"https://www.rozek.de/","name":"Andreas Rozek","email":"a.rozek@gmx.de"},{"url":"https://pomax.github.io","name":"Pomax","email":"pomax@nihongoresources.com"}],"maintainers":[{"email":"pomax@nihongoresources.com","name":"pomax"},{"email":"bernardo-castilho@hotmail.com","name":"bernardo-castilho"}],"readme":"# DragDropTouch\n\nPolyfill that enables HTML5 drag drop support on mobile (touch) devices.\n\nThe HTML5 specification includes support for drag and drop operations.\nUnfortunately, this specification is based on mouse events, rather than\npointer events, and so most mobile browsers do not implement it. As such,\napplications that rely on HTML5 drag and drop have reduced functionality\nwhen running on mobile devices.\n\nThe `DragDropTouch` class is a polyfill that translates touch events into\nstandard HTML5 drag drop events. If you add the polyfill to your pages,\ndrag and drop operations should work on mobile devices just like they\ndo on the desktop.\n\n## Demo\n\n- [Click here to play with the demo](https://drag-drop-touch-js.github.io/dragdroptouch/demo/)\n\nThis demo should work on desktop as well as on mobile devices, including\niPads and Android tablets. To test this on a desktop, turn on \"responsive\ndesign mode\", which is both a button in the browser developer tools, as\nwell as the hot-key <code>ctrl-shift-M</code> on Windows and Linux, or\n<code>cmd-shift-M</code> on Mac.\n\n## How to \"install\"\n\n### using a package manager\n\nThis package lives in the npm registry as `@dragdroptouch/drag-drop-touch`\nand can be installed with any package manager that can pull from the\nnpm registery:\n\n```\nnpm install -s @dragdroptouch/drag-drop-touch\nyarn install @dragdroptouch/drag-drop-touch\npnpm add @dragdroptouch/drag-drop-touch\n```\n\n### just as a file\n\nAdd the\n [`drag-drop-touch.esm.js`](https://raw.githubusercontent.com/drag-drop-touch-js/dragdroptouch/refs/heads/master/dist/drag-drop-touch.esm.js)\n or\n [`drag-drop-touch.esm.min.js`](https://raw.githubusercontent.com/drag-drop-touch-js/dragdroptouch/refs/heads/master/dist/drag-drop-touch.esm.min.js)\n polyfill script to your page to enable drag and drop on devices with touch input:\n\n```html\n<script src=\"drag-drop-touch.esm.min.js?autoload\" type=\"module\"></script>\n```\n\nNote the `?autoload` query argument on the `src` URL: this loads the polyfill\nand immediately enables it so that you do not need to write any code yourself.\nIf omitted, the library will instead set up a `window.DragDropTouch` object\nwith a single function, `DragDropTouch.enable(dragRoot, dropRoot, options)`.\nAll three arguments are optional. If left off, `DragDropTouch.enable()` simply\npolyfills the entire page. If you only want the polyfill to apply to specific\nelements though, you can call the `enable` function once for each set of\nelements that need polyfilling.\n\nAlso note the `type=\"module\"`, which is required. If left off, you'll probably\nget a browser error similar to:\n\n```\nUncaught SyntaxError: import.meta may only appear in a module\n```\n\n### Using a CDN url\n\nYou can also load the library using a CDN solution such as jsDelivr:\n\n```html\n<script\n  src=\"https://cdn.jsdelivr.net/npm/@dragdroptouch/drag-drop-touch@latest/dist/drag-drop-touch.esm.min.js\"\n  type=\"module\"\n></script>\n```\n\n## This is a JS ES module\n\nAs an ES module, you can also use this polyfill as an import in any other script:\n\n```js\nimport { enableDragDropTouch } from \"./drag-drop-touch.esm.min.js\";\n\n// Set up the default full page polyfill:\nenableDragDropTouch();\n\n// Or, explicitly polyfill only certain elements\nenableDragDropTouch(dragRootElement, dropRootElement);\n\n// Or even explicitly polyfill only certain elements with non-default behaviour\nconst options = {\n  // ...\n};\nenableDragDropTouch(dragRootElement, dropRootElement, options);\n```\n\n## Polyfill behaviour\n\nThe **DragDropTouch** polyfill attaches listeners to the document's touch events:\n\n- On **touchstart**, it checks whether the target element has the draggable\n  attribute or is contained in an element that does. If that is the case, it\n  saves a reference to the \"drag source\" element and prevents the default\n  handling of the event.\n- On **touchmove**, it checks whether the touch has moved a certain threshold\n  distance from the origin. If that is the case, it raises the **dragstart**\n  event and continues monitoring moves to fire **dragenter** and **dragleave**.\n- On **touchend**, it raises the **dragend** and **drop** events.\n\nTo avoid interfering with the automatic browser translation of some touch events\ninto mouse events, the polyfill performs a few additional tasks:\n\n- Raise the **mousemove**, **mousedown**, **mouseup**, and **click** events when\n  the user touches a draggable element but doesn't start dragging,\n- Raise the **dblclick** event when there's a new touchstart right after a click,\n  and\n- Raise the **contextmenu** event when the touch lasts a while but the user doesn't\n  start dragging the element.\n\n## Overriding polyfill behaviour\n\nThe following options can be passed into the enabling function to change how the\npolyfill works:\n\n- **allowDragScroll** is a flag that determines whether to allow scrolling when\n  a drag reaches the edges of the screen. This can be either `true` or `false`,\n  and is `true` by default.\n- **contextMenuDelayMS** is the number of milliseconds we'll wait before the\n  polyfill triggers a context menu event on long press. This value is 900 by\n  default.\n- **dragImageOpacity** determines how see-through the \"drag placeholder\", that's\n  attached to the cursor while dragging, should be. This value is a number in\n  the interval [0, 1], where 0 means fully transparent, and 1 means fully opaque.\n  This value is 0.5 by default.\n- **dragScrollPercentage** is the size of the \"hot region\" at the edge of the\n  screen as a percentage value on which scrolling will be allowed, if the\n  **allowDragScroll** flag is true (which is its default value). This value is\n  10 by default.\n- **dragScrollSpeed** is the number of pixels to scroll if a drag event occurs\n  within a scrolling hot region. This value is 10 by default.\n- **dragThresholdPixels** is the number of pixels that a touchmove needs to\n  actually move before the polyfill switches to drag mode rather than click mode.\n  This value is 5 by default\n- **isPressHoldMode** is a flag that tells the polyfill whether a a long-press\n  is required before polyfilling drag events. This value can be either `true` or\n  `false`, and is `false` by default.\n- **forceListen** is a flag that determines whether the polyfill should be\n  enabled irrespective of whether the browser indicates that it's running on\n  a touch-enabled device or not. This value is `true` by default.\n- **pressHoldDelayMS**: is the number of milliseconds the polyfill will wait\n  before it considers an active press to be a \"long press\". This value is 400\n  by default.\n- **pressHoldMargin** is the number of pixels we allow a touch event to drift\n  over the course of a long press start. This value is 25 by default.\n- **pressHoldThresholdPixels** is the drift in pixels that determines whether\n  a long press actually starts a long press, or starts a touch-drag instead.\n  This value is 0 by default.\n\n## Thanks\n\n- Thanks to Eric Bidelman for the great tutorial on HTML5 drag and drop:\n  [Native HTML5 Drag and Drop](http://www.html5rocks.com/en/tutorials/dnd/basics/).\n- Thanks also to Chris Wilson and Paul Kinlan for their article on mouse and touch events:\n  [Touch And Mouse](http://www.html5rocks.com/en/mobile/touchandmouse/).\n- Thanks to Tim Ruffles for his iOS shim code which was inspiring:\n  [iOS DragDrop Shim](https://github.com/timruffles/ios-html5-drag-drop-shim).\n\n## License\n\n[MIT License](./LICENSE)\n\n## For developers\n\nIf you wish to work on this library, fork and clone the repository, then run\n`npm install` to install all the dependency, followed by a one-time\n`npm run dev:setup`, which will install the necessary components for running\nthe integration tests.\n\n### Running tests\n\nThis repository uses the standard `npm test` command to run build and\nintegration tests. Build testing consists of linting the source code using `tsc`,\nauto-formatting it using `prettier`, and compiling it into three bundles (debug, normal, and minified) using `esbuild`. Integration tests are found in the\n`tests/touch.spec.js` file, using Playwright as test runner.\n\nAdditionally, `npm run test:debug` will run the tests with `DEBUG` statements preserved, useful for when tests fail to pass and you're trying to find out what's actually happening.\n\n### Manual testing\n\nTo manually test in the browser, you can run `npm start` and then open the\nURL that is printed to the console once the initial build tasks have finished.\nThis runs a local server that lets you run the demo page, but with the\n`drag-drop-touch.esm.min.js` replaced by a `drag-drop-touch.debug.esm.js`\ninstead, which preserves all debug statements used in the TypeScript source.\n\nTo add your own debug statements, use the `DEBUG:` label followed by either\na normal statement, or multiple statements wrapped in a new block.\n","readmeFilename":"README.md"}