{"_id":"@codeandsoda/smooth-drag-order","_rev":"10-39a140f9e3106a0e3ff65885b5e49074","name":"@codeandsoda/smooth-drag-order","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.0":{"name":"@codeandsoda/smooth-drag-order","version":"1.0.0","description":"- vertical dragging and reordering only\r - mobile (touch screen) support\r - Emits `change` event on reordering\r - mixed heights are supported\r - uses `MutationObserver` to keep up with children list changes. Will probably break if you change children list","main":"module.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"homepage":"https://github.com/buribalazs/smooth-drag-order#readme","gitHead":"1a8ce972684515de86f7957a85877cb546aec321","_id":"@codeandsoda/smooth-drag-order@1.0.0","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-8UsiEpJ27UdHsEj7AllVler/C3Jhlyhcwe0ODRQLcl7elzF4zJSEayupMJ4LbG8OVyjcM0CbIZJi/GGEWVhToA==","shasum":"91a04da2c4fbe87a2221edc5ebbd5c4ed1851db9","tarball":"https://registry.npmjs.org/@codeandsoda/smooth-drag-order/-/smooth-drag-order-1.0.0.tgz","fileCount":4,"unpackedSize":11420,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTBpw94H+u/li7CJPdNY/CJFW9PGUVSRDVj348B+mM0QIga6XV5ERJ9FtwJd8e8cKMCOIa5aFpNmVTmaCqA4/LMjo="}]},"_npmUser":{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"},"directories":{},"maintainers":[{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smooth-drag-order_1.0.0_1634551523372_0.33307151573868654"},"_hasShrinkwrap":false},"1.0.1":{"name":"@codeandsoda/smooth-drag-order","version":"1.0.1","description":"- vertical dragging and reordering only\r - mobile (touch screen) support\r - Emits `change` event on reordering\r - mixed heights are supported\r - uses `MutationObserver` to keep up with children list changes. Will probably break if you change children list","main":"module.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"homepage":"https://github.com/buribalazs/smooth-drag-order#readme","gitHead":"b091d072d12bbe0a1c0a05ecfef48ed542977dc1","_id":"@codeandsoda/smooth-drag-order@1.0.1","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-/upCPokWtbpfvsDhpJ5m0bpxDsbNAuBEYrnYEcmxSA0IX6DgTDPO/wjVRw1SdDibiLG6/zMBt5jd5OTmcakkCQ==","shasum":"f74a744f40251d6e62b45ab66bdccfd2dffeba64","tarball":"https://registry.npmjs.org/@codeandsoda/smooth-drag-order/-/smooth-drag-order-1.0.1.tgz","fileCount":4,"unpackedSize":11420,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8RbwF+KDyvmnYIzsyPN/VNo/WHn81GEAIu3dlDpWxlQIgS6BIu3z+N+pi6Zd/WwDtuVMEwQC+0wa+3DeXSYIU99I="}]},"_npmUser":{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"},"directories":{},"maintainers":[{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smooth-drag-order_1.0.1_1634551771085_0.9331137041991382"},"_hasShrinkwrap":false},"1.0.2":{"name":"@codeandsoda/smooth-drag-order","version":"1.0.2","description":"reorder a vertical list by dragging and dropping. Smooth animations.","main":"module.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"homepage":"https://github.com/buribalazs/smooth-drag-order#readme","gitHead":"94c102bcc2b2faf1b788597f688aeb7ac985c402","_id":"@codeandsoda/smooth-drag-order@1.0.2","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-6D4DZrl8PADrszCmEjYhMQn23epvA84cd+a8Lvn76K3Bli2HTJ2FHvE7twAh95qg3sC6HPYpIWJNLTZXGIO7aw==","shasum":"0c714ead310f03bd120d60d8c3ecfda2b4a1649b","tarball":"https://registry.npmjs.org/@codeandsoda/smooth-drag-order/-/smooth-drag-order-1.0.2.tgz","fileCount":4,"unpackedSize":13679,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbFzkJ7+y5ary1t8+MHtx6zqklxhI2QtUaWXjX+AnIFAiAPWMZDBRAQqWM9zkeY9Yd6pygq+a0QW4iq0l0hYHYgaw=="}]},"_npmUser":{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"},"directories":{},"maintainers":[{"name":"gyurka00","email":"gyorgy.csado@codeandsoda.com"},{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smooth-drag-order_1.0.2_1634629750862_0.9210921521169311"},"_hasShrinkwrap":false},"1.0.3":{"name":"@codeandsoda/smooth-drag-order","version":"1.0.3","description":"reorder a vertical list by dragging and dropping. Smooth animations.","main":"module.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"homepage":"https://github.com/buribalazs/smooth-drag-order#readme","gitHead":"0020e8e9834b73739b10989937bf6780effe0c86","_id":"@codeandsoda/smooth-drag-order@1.0.3","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-EitxxRrVKUVEBtgkBLq4mbXago7GKrmvu07dL1NQuNqkCk8+zLTHlVWo+2HBuAlfDnVyZdrERZxAoV7Us9P74Q==","shasum":"173797fba872324509a224e189eb31f0eb4810e2","tarball":"https://registry.npmjs.org/@codeandsoda/smooth-drag-order/-/smooth-drag-order-1.0.3.tgz","fileCount":4,"unpackedSize":13730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoTHarikU1PC3EZwTTzGCYDzZXeshYIO3+8WjbkO5ZcQIhAO8aNbQ5ztX480UOChMJ+3yeMa2fPEnGJ1MADSdo9h7q"}]},"_npmUser":{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"},"directories":{},"maintainers":[{"name":"gyurka00","email":"gyorgy.csado@codeandsoda.com"},{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smooth-drag-order_1.0.3_1634813016304_0.3774698525540088"},"_hasShrinkwrap":false},"1.0.4":{"name":"@codeandsoda/smooth-drag-order","version":"1.0.4","description":"reorder a vertical list by dragging and dropping. Smooth animations.","main":"smooth-drag-order.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"homepage":"https://github.com/buribalazs/smooth-drag-order#readme","gitHead":"de827c9bf6cfea6b9ac0dd60df51bd67af9d011c","_id":"@codeandsoda/smooth-drag-order@1.0.4","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-Bpx52P+Gm6HBN4T1XXXn77Rf/2s3T2AczYOHON1FgNSsSy0nUltHIDtBG+UfsKoCyS2iMVVA/cwnnbMjdmWwfw==","shasum":"d18d69ba98d5f43b2ec9b0a764f63e00b8cc32ea","tarball":"https://registry.npmjs.org/@codeandsoda/smooth-drag-order/-/smooth-drag-order-1.0.4.tgz","fileCount":5,"unpackedSize":13874,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzG90OkaTBOLYOLLSEMT/23lnAlMFHJugUdgf9DbQoFgIhAPYNvd4GE0afEMNc8HM1ql84bLzFowS1rQyciQs7QLOh"}]},"_npmUser":{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"},"directories":{},"maintainers":[{"name":"gyurka00","email":"gyorgy.csado@codeandsoda.com"},{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smooth-drag-order_1.0.4_1635941463000_0.18028065568766172"},"_hasShrinkwrap":false},"1.0.5":{"name":"@codeandsoda/smooth-drag-order","version":"1.0.5","description":"reorder a vertical list by dragging and dropping. Smooth animations.","main":"smooth-drag-order.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"homepage":"https://github.com/buribalazs/smooth-drag-order#readme","gitHead":"c03aec5bc346c1c94d14b3b5a1115ac8aa810496","_id":"@codeandsoda/smooth-drag-order@1.0.5","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-QBRJijzf7ZQM/I07pCQTr/aF0R9wbQxFYSIrWqKtHCCElxDvKPu2g3NMKE77l6f/w4d8HP6H+h8JiYrMRKTeAQ==","shasum":"024b8578d867ae0d33561e41817d35595de6cf62","tarball":"https://registry.npmjs.org/@codeandsoda/smooth-drag-order/-/smooth-drag-order-1.0.5.tgz","fileCount":5,"unpackedSize":14992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoz5BZLKl0p8DQWMxM6pxEHyZkWCG8YZe7zklLfIlelAIgcl1YiHeljwEAeZZXe6pXL6uvWPj7XaikWVXAeEi/+dY="}]},"_npmUser":{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"},"directories":{},"maintainers":[{"name":"gyurka00","email":"gyorgy.csado@codeandsoda.com"},{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smooth-drag-order_1.0.5_1635948782006_0.05676384051385819"},"_hasShrinkwrap":false},"1.0.6":{"name":"@codeandsoda/smooth-drag-order","version":"1.0.6","description":"reorder a vertical list by dragging and dropping. Smooth animations.","main":"smooth-drag-order.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"homepage":"https://github.com/buribalazs/smooth-drag-order#readme","gitHead":"c3753e5f2718bfbbd5a744770b813f0f6770c0af","_id":"@codeandsoda/smooth-drag-order@1.0.6","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-/dteYfholeS7liruLcSdjzU48XVyuVVE/hxy+6yN5QTBvfbiedr7hcL76+wtBOUfkRob9VurFE5zE0Jk+Uq/ZQ==","shasum":"acc636115852e59235f7b6417156249587dd7193","tarball":"https://registry.npmjs.org/@codeandsoda/smooth-drag-order/-/smooth-drag-order-1.0.6.tgz","fileCount":5,"unpackedSize":15162,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHivkewssd3TvRciVDT7T/11adKu4tXH/AEtfAt+BFIgAiBh86mOQi42QZvvpLqnpb6PDrV+xoIWZQ1opKys/0WWXA=="}]},"_npmUser":{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"},"directories":{},"maintainers":[{"name":"gyurka00","email":"gyorgy.csado@codeandsoda.com"},{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smooth-drag-order_1.0.6_1635950888761_0.24846096466727685"},"_hasShrinkwrap":false},"1.0.7":{"name":"@codeandsoda/smooth-drag-order","version":"1.0.7","description":"reorder a vertical list by dragging and dropping. Smooth animations.","main":"smooth-drag-order.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"author":"","license":"ISC","bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"homepage":"https://github.com/buribalazs/smooth-drag-order#readme","gitHead":"7b40d21d076c3e31765f61481f537beaf4c5ec9f","_id":"@codeandsoda/smooth-drag-order@1.0.7","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-327boPc8UM/yLfLuGphH0dLIvlzxSmopsqV0xUZm3WRHFDweH1jIUxzsaAR7QS/ePVYZ2dzMYllksfd/ESuheg==","shasum":"473b211f2d6fc507ccd4abca567f8b1c28536054","tarball":"https://registry.npmjs.org/@codeandsoda/smooth-drag-order/-/smooth-drag-order-1.0.7.tgz","fileCount":5,"unpackedSize":15148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzdBaCRA9TVsSAnZWagAAev0P/0pukGoX69bfBBXN95Ka\nU5/MqpBU1VSbBfr79P/g4rrSdJXQYV3FfAhOqJmU+iC63gq+PJOk+ybnjEF6\npALmqBRZQVOIhvoZkGtY/4Jv6WNYh7HsKHdX6h3x3e0z449+r62YjKlDfVqC\nqwpIdXIZmKGZqnBALMpvVMs8SsV7BVaGJW4wH4DirvqcRcW7yGwJSz22o2hH\nCoo7J4pc7I/VToJUMRs34MGTY4aZ7IUb5YXHUXmD/9HixU6fYIKVoahYs2Cj\n2ZMqyWgW90GPAZ6sk9xsna4bh5M3OmY9hhwxeo7yHoGTpquXzVOXnyzylwRz\n7bw9bXGArogySDPvTEb+XS8KxHnUNi6isC3b4HgcA98U0DufZKXUcLrL/ZAW\npPpFYTUvYmbIJr3zh2V5ZLmakuyR9afpiYjKi7pjWOKzBk5CKvVg29C4V8j9\n6NtmanK46oXyBb4qDEMN2Vx9bVlQ4ocV38q96kvPye9A0YNn4x52amtlyfbg\n5g0XO2Ucb6l+JoPyW3vavW84KyGlDstfo0SnKOdHXrI+WcrpoBQZRkI/9JYc\ntT9FMHPoN+KoUOGly5f2iyeqh7GMOkYttUH4jzwey0LRnSd0mUO/oBula7MS\nLYnWO0kPvUULpjAxUOzMn8ApJxu9RRWhwZHVhKxQMCpsYRicrXBnCopKSQyk\ngZLV\r\n=K8c9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDV7BRiSEHulQlGHAlICIyKIIiwgg83zfC2S84tv4YfgAiAfN7TumFH3v1EOy+vvUw8SBHKWti6v0Afsgr3VmNttWA=="}]},"_npmUser":{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"},"directories":{},"maintainers":[{"name":"gyurka00","email":"gyorgy.csado@codeandsoda.com"},{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smooth-drag-order_1.0.7_1636040311396_0.5057894215646899"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-18T10:05:23.314Z","1.0.0":"2021-10-18T10:05:23.506Z","modified":"2022-04-04T23:58:06.637Z","1.0.1":"2021-10-18T10:09:31.257Z","1.0.2":"2021-10-19T07:49:11.201Z","1.0.3":"2021-10-21T10:43:36.485Z","1.0.4":"2021-11-03T12:11:03.156Z","1.0.5":"2021-11-03T14:13:02.175Z","1.0.6":"2021-11-03T14:48:08.884Z","1.0.7":"2021-11-04T15:38:31.539Z"},"maintainers":[{"name":"gyurka00","email":"gyorgy.csado@codeandsoda.com"},{"name":"dyuri","email":"dyuri@horak.hu"},{"name":"balazs.buri.codeandsoda","email":"balazs.buri@codeandsoda.com"}],"description":"reorder a vertical list by dragging and dropping. Smooth animations.","homepage":"https://github.com/buribalazs/smooth-drag-order#readme","repository":{"type":"git","url":"git+https://github.com/buribalazs/smooth-drag-order.git"},"bugs":{"url":"https://github.com/buribalazs/smooth-drag-order/issues"},"license":"ISC","readme":"# Smooth Drag Order\r\n\r\n- vertical dragging and reordering only\r\n- mobile (touch screen) support\r\n- Emits `change` event on reordering\r\n- mixed heights are supported\r\n- uses `MutationObserver` to keep up with children list changes. Will probably break if you change children list while the user is dragging though\r\n- can be destroyed and reinitialized without event listener stacking or clashing\r\n- great performance\r\n- 1.3Kb minified and gzipped\r\n- features *disgusting™* codestyle\r\n\r\n## Browser support\r\n\r\n| Internet Explorer | Edge   | Firefox | Chrome | Safari | Samsung browser |\r\n|-------------------|--------|---------|--------|--------|-----------------|\r\n| ❌                |✔️      |✔️      |   ✔️   | ✔️     | ✔️             |\r\n\r\nDemo: https://codepen.io/buribalazs/pen/NWvReZN\r\n\r\n## How to\r\n\r\nThis is an ES6 module\r\n\r\nInstall the package with `npm install @codeandsoda/smooth-drag-order`\r\n\r\n### type declaration:\r\n``` typescript\r\nexport function smoothDragOrder(\r\n    container: HTMLElement, \r\n    animationDurationSeconds: number = 0.2, \r\n    restoreOriginalNodeList:Boolean = false): { \r\n        destroy: () => void \r\n    }\r\n```\r\n\r\n|argument|default|description|\r\n|---|---|---|\r\n|container| `undefined` | An element containing the draggable cards that all have an element inside them decorated with the `drag-handle` attribute\r\n|animationDurationSeconds|`0.2` seconds|how long it takes for cards to move out of the way and to put a card back\r\n|restoreOriginalNodeList|`false`|if `true` the original node list will be restored after a card is dropped. useful for reactive libraries like lit-element where reordering things breaks the rendering.\r\n\r\n### considering you have the following markup:\r\n```html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Smooth Drag Order</title>\r\n    <style>\r\n        .my-draggables>div {\r\n            /* PREVENT MARGIN COLLAPSE */\r\n            border: 1px solid transparent;\r\n        }\r\n\r\n        .my-draggables>div>div {\r\n            transition: transform 0.3s;\r\n        }\r\n\r\n        .my-draggables .dragged>div {\r\n            /* .dragged ADDED BY SCRIPT */\r\n            /* AVOID ADDING STYLES TO CONTAINERS CHILDREN. USE INNER ELEMENTS INSTEAD */\r\n            transform: rotate(3deg);\r\n\r\n        }\r\n\r\n        [drag-handle] {\r\n            margin: 0.3rem;\r\n            width: 300px;\r\n        }\r\n\r\n        [drag-handle]>div {\r\n            padding: 2rem;\r\n            color: white;\r\n            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);\r\n        }\r\n    </style>\r\n</head>\r\n\r\n<body>\r\n\r\n    <!-- THE CONTAINER -->\r\n    <div class=\"my-draggables\">\r\n\r\n        <!-- LIST ITEM. DON'T STYLE. ADD ANY CUSTOM DATA FOR EASE OF USE -->\r\n        <!-- EVERY ITEM MUST HAVE DRAG HANDLE INSIDE IT -->\r\n        <div data-my=\"1\">\r\n\r\n            <!-- USE drag-handle ATTR TO MARK HANDLE -->\r\n            <div drag-handle>\r\n                <div style=\"background-color: red;\">1</div>\r\n            </div>\r\n        </div>\r\n        <div data-my=\"2\">\r\n            <div drag-handle>\r\n                <div style=\"background-color: green;\">2</div>\r\n            </div>\r\n        </div>\r\n        <div data-my=\"3\">\r\n            <div drag-handle>\r\n                <div style=\"background-color: blue;\">3<br>is taller</div>\r\n            </div>\r\n        </div>\r\n        <div data-my=\"4\">\r\n            <div drag-handle>\r\n                <div style=\"background-color: orange;\">4</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <br>\r\n\r\n    <button id=\"stopit\">stop it</button>\r\n    <button id=\"startit\">start it</button>\r\n</body>\r\n</html>\r\n```\r\n\r\nYou can do:\r\n```javascript\r\nimport { smoothDragOrder } from '@codeandsoda/smooth-drag-order'\r\n\r\nconst container = document.querySelector('.my-draggables')\r\n\r\nlet handle = smoothDragOrder(container, 0.2) //0.2 seconds animation duration\r\n\r\ncontainer.addEventListener('change', e => {\r\n    console.log(\r\n        Array.from(e.currentTarget.children)\r\n        .map(el => el.dataset.my)\r\n    )\r\n})\r\n\r\ndocument.getElementById('stopit').onclick = () => handle.destroy()\r\ndocument.getElementById('startit').onclick = () => (handle = smoothDragOrder(container, 0.2))\r\n```","readmeFilename":"README.md"}