{"_id":"@akrc/draggable-polyfill","_rev":"1-3ef29014678f0d97bd1928ebd179520a","name":"@akrc/draggable-polyfill","dist-tags":{"latest":"1.2.5"},"versions":{"1.2.4":{"name":"@akrc/draggable-polyfill","version":"1.2.4","description":"🌈 a beautify polyfill for native drag! ","main":"index.js","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/XboxYan/draggable-polyfill.git"},"keywords":["polyfill","draggable","drag","html5","dragover","dragend","drop"],"author":{"name":"XboxYan"},"license":"MIT","bugs":{"url":"https://github.com/XboxYan/draggable-polyfill/issues"},"homepage":"https://github.com/XboxYan/draggable-polyfill#readme","publishConfig":{"access":"public"},"gitHead":"e8977277e213935702a708de9eb98533da40f8dd","_id":"@akrc/draggable-polyfill@1.2.4","_nodeVersion":"19.6.0","_npmVersion":"9.4.2","dist":{"integrity":"sha512-OYtuzUY3ybXF4wYwYRskp7krJmn5Tqz59dN59+ARPwa8JntjoFqFrTE2wNrMZJyBStlzGw6ihCi6G+JvpgOVcg==","shasum":"f6234161aed486f9cf5975d6da7b4628db7edfd6","tarball":"https://registry.npmjs.org/@akrc/draggable-polyfill/-/draggable-polyfill-1.2.4.tgz","fileCount":9,"unpackedSize":1150550,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFkLn2U99O6omP61wEEajrjbHYbs9CJ1FEgXaicNkk4zAiAxp/8iEvPDNRcqim5d1iS2Dl3z0iSImIoyjqk7KY8GNQ=="}]},"_npmUser":{"name":"akarachen","email":"akarachen@outlook.com"},"maintainers":[{"name":"akarachen","email":"akarachen@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/draggable-polyfill_1.2.4_1686704178371_0.6591413638577848"},"_hasShrinkwrap":false},"1.2.5":{"name":"@akrc/draggable-polyfill","version":"1.2.5","description":"🌈 a beautify polyfill for native drag! ","main":"index.js","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/XboxYan/draggable-polyfill.git"},"keywords":["polyfill","draggable","drag","html5","dragover","dragend","drop"],"author":{"name":"XboxYan"},"license":"MIT","bugs":{"url":"https://github.com/XboxYan/draggable-polyfill/issues"},"homepage":"https://github.com/XboxYan/draggable-polyfill#readme","publishConfig":{"access":"public"},"gitHead":"5ae705d18cc2439054fc870ed8f455b91a3e976f","_id":"@akrc/draggable-polyfill@1.2.5","_nodeVersion":"19.6.0","_npmVersion":"9.4.2","dist":{"integrity":"sha512-IfG6KW0zyYzz7S8rIZno9M170APIby3htinos9/6rCpqHI38Twa6uDqRYzlR77bgAya06gy9JYmSK8LM8mvD6g==","shasum":"59a60d49469812796c368ffc498c54f483d50054","tarball":"https://registry.npmjs.org/@akrc/draggable-polyfill/-/draggable-polyfill-1.2.5.tgz","fileCount":9,"unpackedSize":1150560,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5U63NANR9fzxe9k1xSuX5n0S2DP7lfbFLPGTXfDlalAiBid/o2aQgZpFJMxN0LrfcrQMbi811at4ItjX1HbLQbcg=="}]},"_npmUser":{"name":"akarachen","email":"akarachen@outlook.com"},"maintainers":[{"name":"akarachen","email":"akarachen@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/draggable-polyfill_1.2.5_1686707821933_0.9072953530079841"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-14T00:56:18.310Z","1.2.4":"2023-06-14T00:56:18.727Z","modified":"2023-06-14T01:57:02.359Z","1.2.5":"2023-06-14T01:57:02.229Z"},"maintainers":[{"name":"akarachen","email":"akarachen@outlook.com"}],"description":"🌈 a beautify polyfill for native drag! ","homepage":"https://github.com/XboxYan/draggable-polyfill#readme","keywords":["polyfill","draggable","drag","html5","dragover","dragend","drop"],"repository":{"type":"git","url":"git+https://github.com/XboxYan/draggable-polyfill.git"},"author":{"name":"XboxYan"},"bugs":{"url":"https://github.com/XboxYan/draggable-polyfill/issues"},"license":"MIT","readme":"# draggable-polyfill\n\n🌈a beautify polyfill for html5 native drag! \n\n## Feature\n\nRemove translucent preview!\n\n* light and beautiful\n* native and no dependence\n* progressive enhancement and no side effects\n* cross framework\n\n## Example\n\n* [with draggable-polyfill](http://xboxyan.codelabo.cn/draggable-polyfill/example/index.html)\n\n<img alt=\"native drag with draggable-polyfill\" src=\"./screenshot/drag.gif\"  style=\"width:600px\">\n\n## How to use\n\nImport the library code\n\n* [github](https://github.com/XboxYan/draggable-polyfill)\n\n```html\n<script src=\"./lib/draggable-polyfill.js\"></script>\n```\n\n* [npm](https://www.npmjs.com/package/draggable-polyfill)\n\n```\nnpm install draggable-polyfill\n```\n\nthen these native draggable elements( `[draggable=true]`,`img` ) will becoming beautiful\n\n`[allowdrop]`elements will receive drag event data.\n\n```html\n<div draggable=\"true\">drag me</div>\n<img src=\"./avator\" alt=\"avator\">\n<!--dropbox-->\n<div allowdrop></div>\n```\n\nyou can use [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)\n\n```js\n//draggable\ndraggable.addEventListener('dragstart',()=>{})\ndraggable.addEventListener('drag',()=>{})\ndraggable.addEventListener('dragend',()=>{})\n//allowdrop\nallowdrop.addEventListener('dragover',()=>{})\nallowdrop.addEventListener('dragenter',()=>{})\nallowdrop.addEventListener('dragleave',()=>{})\nallowdrop.addEventListener('drop',()=>{})\n```\n\n## How to Custom Style\n\ndraggable elements will add props `dragging` and dropbox will add props `over` under dragging, so you can custom style through CSS\n\n```html\n<!--your draggable element-->\n<div class=\"dragbox\" draggable=\"true\">drag me</div>\n<!--your allowdrop element-->\n<div class=\"dropbox\" allowdrop></div>\n```\n```css\n/**custom styles**/\n.dragbox[dragging]{\n    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);\n}\n.dropbox[over]{\n    border-color: red;\n}\n```\n\n## Other Feature\n\nyou can set `axis=X|Y` to limit drag direction or press `shift` key when dragging.\n\n```html\n<div axis=\"X\" draggable=\"true\">drag me</div>\n```\n\n## Browser Supports\n\n* Chrome\n* Firefox\n* Safari\n\nNote:This polyfill works on Chrome and Firefox, not for IE( IE is not supports `setDragImage` ), it will keep default effect.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}