{"_id":"@dupfioire/draggable","_rev":"2-d558ca90374f4cfd30ce006dafe228c0","name":"@dupfioire/draggable","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@dupfioire/draggable","version":"1.0.1","main":"dist/index.js","author":{"name":"Erioifpud"},"license":"MIT","unpkg":"dist/index.js","jsdelivr":"dist/index.js","keywords":["drag"],"types":"@types/index.d.ts","devDependencies":{"@babel/core":"^7.11.6","@babel/plugin-proposal-class-properties":"^7.10.4","@babel/polyfill":"^7.11.5","@babel/preset-env":"^7.11.5","@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","babel-eslint":"^10.1.0","babel-loader":"^8.1.0","clean-webpack-plugin":"^3.0.0","css-loader":"^4.3.0","eslint":"^7.12.0","eslint-config-standard":"^15.0.0","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.2","file-loader":"^6.1.0","html-webpack-plugin":"^4.4.1","mini-css-extract-plugin":"^0.11.2","ts-loader":"^8.0.7","typescript":"^4.0.3","uglifyjs-webpack-plugin":"^2.2.0","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"scripts":{"start":"webpack-dev-server --config ./webpack.config.dev.js","build":"webpack --config ./webpack.config.prod.js"},"dependencies":{},"repository":{"type":"git","url":"git+https://github.com/erioifpud/draggable.git"},"gitHead":"38fbed170af2dd80d54cea659c864e7e771020a5","description":"一个拖拽相关的库，能实现元素的**移动**与**缩放**等功能。","bugs":{"url":"https://github.com/erioifpud/draggable/issues"},"homepage":"https://github.com/erioifpud/draggable#readme","_id":"@dupfioire/draggable@1.0.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-H8n2iJjK+rS+GRHjC+mZTIVJuDYNmndfVoLnpB7oEegsFThgwkzBucEPk+/pvMF+zDTCms0wzCQUm08tIhkUOw==","shasum":"aba30a47b64c4499eb1eb0672756035eba9c5fa9","tarball":"https://registry.npmjs.org/@dupfioire/draggable/-/draggable-1.0.1.tgz","fileCount":12,"unpackedSize":25273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl+azCRA9TVsSAnZWagAA4ucQAJA236NUWGZ4tjdpa8RR\nilfFzbEPywfp3tb/iUH5LuWZ1M9VZfoiB3zk+qiNU+CUTaq8Ope26dweN7ty\nd5fNIwud0ihs4Um6upKKIz0VPO0OyPWwNexHPYGu8peVvw63a6jsqbGSjiha\nDBPZPaBk/CIn7O5kXAhLoJBlE47Ma/3wL5JuC+YvGBMaywmrix9etia1In1R\nBLHGVfdWH34fQ7PEFcOkRtqUKE4ugauX1YxcN4R1APrCDEAwr+O49UNtXbj7\nvn2EL/vptKx90pzsAfXUqtDMO71sPVJtRQNO0xLcLMcqRvHYEjSSLabFxLK/\n0opszzz3OOUYHJZuDMEHGoADkW7HRYcgqQgSsmWqJfERTcnLzR3fFGnxnkxP\nFttHULCE1w98fIxW5Q+6dZtJDvnlCSG3iXR0dRdqEvDndXciXs8UkB5OC4TE\nURSZ4FiTA7Zm8mGTyg6RxRqbCviPHbkU1eMYCBnayio9CZ+hB6TYhvKnXr9t\nqrl0eWE0PYmVzQ8fPYcgyUs+SxX+7T671D+Aw2K8ixuQCQqQKhR2B0pJ2y6/\nZuwkNDYmowfsJ74dMnuF6MN/VyzccY1tkWDIDs/rj58Cz0RCiH1fafXfda62\n6JIcBl9yy0GpXgdZ+xUhHRd0ZDJZVESJi4jzgVD8MneCc82bjEBDmfeATO70\nkNRu\r\n=whZa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrmxT6VqBmgF+0T2C8Z051t2/eqocC7XSpWp5y+Ty7tQIgFZmVzEdWe+s9JknwaWNAcMIRZWvVmUhv91AZnqWRAjI="}]},"maintainers":[{"name":"erioifpud","email":"erioifpud@zuo.si"}],"_npmUser":{"name":"erioifpud","email":"erioifpud@zuo.si"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/draggable_1.0.1_1603790514948_0.39687548823738306"},"_hasShrinkwrap":false},"1.0.2":{"name":"@dupfioire/draggable","version":"1.0.2","main":"dist/index.js","author":{"name":"Erioifpud"},"license":"MIT","unpkg":"dist/index.js","jsdelivr":"dist/index.js","keywords":["drag"],"types":"@types/index.d.ts","devDependencies":{"@babel/core":"^7.11.6","@babel/plugin-proposal-class-properties":"^7.10.4","@babel/polyfill":"^7.11.5","@babel/preset-env":"^7.11.5","@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","babel-eslint":"^10.1.0","babel-loader":"^8.1.0","clean-webpack-plugin":"^3.0.0","css-loader":"^4.3.0","eslint":"^7.12.0","eslint-config-standard":"^15.0.0","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.2","file-loader":"^6.1.0","html-webpack-plugin":"^4.4.1","mini-css-extract-plugin":"^0.11.2","ts-loader":"^8.0.7","typescript":"^4.0.3","uglifyjs-webpack-plugin":"^2.2.0","webpack":"^4.44.1","webpack-cli":"^3.3.12","webpack-dev-server":"^3.11.0"},"scripts":{"start":"webpack-dev-server --config ./webpack.config.dev.js","build":"webpack --config ./webpack.config.prod.js"},"dependencies":{},"repository":{"type":"git","url":"git+https://github.com/erioifpud/draggable.git"},"gitHead":"f1f1036d2d1dd95edfbb6211b90e306fa6a4bd51","description":"一个拖拽相关的库，能实现元素的**移动**与**缩放**等功能。","bugs":{"url":"https://github.com/erioifpud/draggable/issues"},"homepage":"https://github.com/erioifpud/draggable#readme","_id":"@dupfioire/draggable@1.0.2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-C+46hAjkKvYPnkIMAe40wWCy3f5bRsdbmHPncSLLWDdMzyYBx5hIAqraxgcIxfTX+bTMwT007gMqtj0YQC70mA==","shasum":"832542af815f115d17560425f8687feaa8365e84","tarball":"https://registry.npmjs.org/@dupfioire/draggable/-/draggable-1.0.2.tgz","fileCount":12,"unpackedSize":26196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD37BCRA9TVsSAnZWagAAFf4P/14orvHql1/qc5Ozosbt\nMzxs3LPl5SMsmZO4jpnPbYTBmWqavPgTYqwbo4x2hGJMi1qlin2NJAYNp9YX\nR29vITMuOFiF/3ajbi1P9drvMnNTqgakX52DLLUj2SAFxl/e3BMMn6Jcg9W7\nLsJXuEvh4s9146WN0gyLUsuieP5Gi5inSTrz1QYfAaCgUHG2vKs270wy6nFK\n4F6dwx4n+dclulxXUl+MFz8JM8zwLVw8EBLEycLe9FN+Cfgz91MXeXaN8Q09\nYwT7vChIb8Hq2foSl1/EanU+6jwd1WxraBbmwWgO/eXDhFzFTajOI1ulB4sC\nIL0jL2rKoUbmG2k9qQF/6/lUUtMdelrjvT9TB+sE7NZWrFcYACL7rdUZAx4/\nQ9z387ntGw0bOrIxFoZBqJ9PR+Do7LBrZp8j2ymwlm7SMUKcT8a3iT2i7BX5\nanOGx6pz9tBZFvecsCEbSH/I3fXcpbXXfS71s8QBIxXuBfytnlzeU5fRZkWf\n+xhjaQh3Th77QnMbZEZQmcXAKBNwS6LACv/0U5p1T+mKV9NSO9TkHJ1sTQfv\n4bqG0MMta79/TSCVy+m625pez9tl2fAcT9IgEGx05p822QUs5R3exdPC1T32\nzmFg17FK5q/cL6GmmhYK6D5NjOWTHpHjDCwYuc1jjZiJeHiLW4WbTV6imBb9\nSJt+\r\n=YrvM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWVFJeQVVCHw+4+H4IMqpfe6lA87LpJ0wcpiRgMDlxywIgaoTujORRO76NLRW6u43KemR1QyO8WHzhH63Q/bMrAN4="}]},"_npmUser":{"name":"erioifpud","email":"erioifpud@zuo.si"},"directories":{},"maintainers":[{"name":"erioifpud","email":"erioifpud@zuo.si"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/draggable_1.0.2_1611628218316_0.20002659322262062"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-27T09:21:54.691Z","1.0.1":"2020-10-27T09:21:55.055Z","modified":"2022-04-05T06:09:04.404Z","1.0.2":"2021-01-26T02:30:18.622Z"},"maintainers":[{"name":"erioifpud","email":"erioifpud@zuo.si"}],"description":"一个拖拽相关的库，能实现元素的**移动**与**缩放**等功能。","homepage":"https://github.com/erioifpud/draggable#readme","keywords":["drag"],"repository":{"type":"git","url":"git+https://github.com/erioifpud/draggable.git"},"author":{"name":"Erioifpud"},"bugs":{"url":"https://github.com/erioifpud/draggable/issues"},"license":"MIT","readme":"# @dupfioire/draggable\n\n一个拖拽相关的库，能实现元素的**移动**与**缩放**等功能。\n\n# 使用方法\n```javascript\nimport Draggable from '@dupfioire/draggable'\n\nconst instance = new Draggable(DraggableOptions)\ninstance.on('dragStart', DragStartHandler)\ninstance.on('dragging', DraggingHandler)\ninstance.on('dragEnd', DragEndHandler)\n\ninstance.destroy()\n```\n\n# 类型\n```typescript\n/**\n * Draggable 的初始化参数\n *\n * @property {HTMLElement} el - 必需，触发拖拽操作的元素\n * @property {HTMLElement} [movingBox] - 需要移动的元素，默认为 el\n * @property {boolean} [pcOnly] - 是否只监听 mouse 相关事件，默认为 true\n * @property {boolean} [hasBorder] - 容器是否有边界，默认为 true\n * @property {HTMLElement} [parent] - 容器元素，默认为 el 的 offsetParent\n * @property {boolean} [useTransform] - 是否使用 CSS 中的 transform 控制元素的位置，默认为 false\n * @property {boolean} [stopPropagation] - 是否阻止拖拽事件传播，默认为 false\n * @property {string} [direction] - 允许拖拽的方向，可选值有 horizontal、vertical 与 all，默认为 all\n * @property {boolean} [reversed] - 是否反向计算拖拽距离（拖动组件与拖动背景的区别），默认为 false\n */\ninterface DraggableOptions {\n  el: HTMLElement,\n  movingBox?: HTMLElement,\n  pcOnly?: boolean,\n  hasBorder?: boolean,\n  parent?: HTMLElement,\n  useTransform?: boolean,\n  stopPropagation?: boolean,\n  direction?: Direction,\n  reversed?: boolean,\n}\n\n/**\n * @param {MouseEvent | TouchEvent} ev - MouseEvent 或 TouchEvent 事件对象\n * @param {object} ctx - 用于在拖动过程中携带信息的对象，dragStart 时产生，dragEnd 时被销毁\n */\ntype DragStartHandler = (ev: MouseEvent | TouchEvent, ctx?: Object) => void\n/**\n * @param {MouseEvent | TouchEvent} ev - MouseEvent 或 TouchEvent 事件对象\n * @param {PositionInfo} pos - 提供拖拽时的位置信息\n * @param {object} ctx - 用于在拖动过程中携带信息的对象，dragStart 时产生，dragEnd 时被销毁\n */\ntype DraggingHandler = (ev: MouseEvent | TouchEvent, pos: PositionInfo, ctx?: Object) => void\n/**\n * @param {MouseEvent | TouchEvent} ev - MouseEvent 或 TouchEvent 事件对象\n * @param {object} ctx - 用于在拖动过程中携带信息的对象，dragStart 时产生，dragEnd 时被销毁\n */\ntype DragEndHandler = (ev: MouseEvent | TouchEvent, ctx?: Object) => void\n\ntype PositionInfo = {\n  top?: number,\n  left?: number\n}\n```\n\n# 例子\n使用`yarn start`启动，可参考`examples`中的代码。\n\n## 拖动\n```javascript\nconst moveInstance = new Draggable({\n  el: barEl,\n  movingBox: cardEl,\n  parent: document.body\n})\nmoveInstance.on('dragging', (ev, { top, left }) => {\n  cardEl.style.top = `${top}px`\n  cardEl.style.left = `${left}px`\n})\n```\n通常只需要监听`dragging`事件，使用 top 与 left 设置元素的位置。\n\n## 缩放\n```javascript\nconst resizeInstance = new Draggable({\n  el: resizeEl,\n  movingBox: cardEl,\n  parent: document.body,\n  hasBorder: false\n})\nresizeInstance.on('dragStart', (ev, ctx) => {\n  ctx.width = cardEl.getBoundingClientRect().width\n  ctx.height = cardEl.getBoundingClientRect().height\n})\nresizeInstance.on('dragging', (ev, { top, left }, ctx) => {\n  const { x, y } = cardEl.getBoundingClientRect()\n  const calcHeight = ctx.height + top - y\n  const calcWidth = ctx.width + left - x\n  cardEl.style.width = `${calcWidth < 300 ? 300 : calcWidth}px`\n  cardEl.style.height = `${calcHeight < 200 ? 200 : calcHeight}px`\n})\n```\n由于 dragging 阶段返回的 top 与 left 是 movingBox 的**实时坐标**，所以 movingBox 的**实时宽高**需要通过计算得出。\n```\n鼠标与 movingBox 内部的距离 = 鼠标在 viewport 的位置（拖拽开始时） - movingBox 距离容器的位置\n实时坐标 = 鼠标在 viewport 的位置（拖拽中） - 鼠标与 movingBox 内部的距离\n```\n在拖拽开始时记录 movingBox 的**初始宽高**（**缩放前的尺寸**）与**初始位置**。\n\n在拖拽中通过`当前位置 - 初始位置`得到鼠标的偏移量，加上**初始宽高**得到**实时宽高**。\n\n要注意的是，如果要实现“缩放”功能，请把`hasBorder`设置为`false`，因为限制了边界会导致位置计算结果被重置。\n","readmeFilename":"README.md"}