{"id":22160371,"url":"https://github.com/rozek/dragdroptouch-bug-fixed","last_synced_at":"2025-03-24T15:22:00.002Z","repository":{"id":57216058,"uuid":"376721534","full_name":"rozek/dragdroptouch-bug-fixed","owner":"rozek","description":"Polyfill that enables HTML5 drag drop support on mobile (touch) devices","archived":false,"fork":false,"pushed_at":"2022-12-12T09:57:31.000Z","size":97,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T08:05:49.428Z","etag":null,"topics":["html5-drag","mobile","mouse-emulation","polyfill","touch-events"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/rozek.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}},"created_at":"2021-06-14T06:15:01.000Z","updated_at":"2023-08-03T19:17:12.000Z","dependencies_parsed_at":"2023-01-27T17:25:14.264Z","dependency_job_id":null,"html_url":"https://github.com/rozek/dragdroptouch-bug-fixed","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdragdroptouch-bug-fixed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdragdroptouch-bug-fixed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdragdroptouch-bug-fixed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdragdroptouch-bug-fixed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/dragdroptouch-bug-fixed/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245044571,"owners_count":20551902,"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":["html5-drag","mobile","mouse-emulation","polyfill","touch-events"],"created_at":"2024-12-02T04:07:36.363Z","updated_at":"2025-03-24T15:21:59.978Z","avatar_url":"https://github.com/rozek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DragDropTouch[-bug-fixed]\n\nPolyfill that enables HTML5 drag drop support on mobile (touch) devices.\n\n**Important!**\n\n**This repository is basically a series of refactorings of the original [dragdroptouch](https://github.com/Bernardo-Castilho/dragdroptouch) in order to make it TypeScript-compatible and fix its bugs more easily (some of them *have* already been fixed).**\n\n**The resulating NPM package has been published with the name \"dragdroptouch-bug-fixed\" and may be downloaded from unpkg.com/dragdroptouch-bug-fixed/dist/DragDropTouch.js**\n\n*(Original description follows)*\n\nThe HTML5 specification includes support for drag and drop operations. \nUnfortunately, most mobile browsers do not implement it, so applications\nthat rely on HTML5 drag and drop have reduced functionality when running\non 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- [Run Demo](http://bernardo-castilho.github.io/DragDropTouch/demo/index.htm)\n\nThe demo should work on desktop as well as on mobile devices, including\niPads and Android tablets.\n\nThe top section of the demo is based on a well-known HTML5 drag and drop \nsample available here: \n\nThe following sections demonstrate how the polyfill works with \nstandards-based components that use HTML5 drag and drop. You can use\ntouch to resize and reorder grid columns, data groups, and pivot\nfields.\n\n## Install\n\nAdd the DragDropTouch.js polyfill to your page to enable drag and drop on mobile devices:\n\n```html\n\u003cscript src=\"DragDropTouch.js\"\u003e\u003c/script\u003e\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 attribute \n  or is contained in an element that does. If that is the case, it saves a reference \n  to the \"drag source\" element and prevents the default handling of the event.\n- On **touchmove**, it checks whether the touch has moved a certain threshold distance\n  from the origin. If that is the case, it raises the **dragstart** event and continues\n  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 into \nmouse events, the polyfill performs a few additional tasks: \n\n- Raise the **mousemove**, **mousedown**, **mouseup**, and **click** events when the \n  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, and\n- Raise the **contextmenu** event when the touch lasts a while but the user doesn't \n  start dragging the element.\n\n## Thanks\n\nThanks to Eric Bidelman for the great tutorial on HTML5 drag and drop: [Native HTML5 Drag and Drop](http://www.html5rocks.com/en/tutorials/dnd/basics/).\n\nThanks also to Chris Wilson and Paul Kinlan for their article on mouse and touch events: [Touch And Mouse](http://www.html5rocks.com/en/mobile/touchandmouse/).\n\nFinally, thanks to Tim Ruffles for his iOS shim code which was inspiring: [iOS DragDrop Shim](https://github.com/timruffles/ios-html5-drag-drop-shim).\n\n## License\n\n[MIT License](LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fdragdroptouch-bug-fixed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fdragdroptouch-bug-fixed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fdragdroptouch-bug-fixed/lists"}