{"_id":"@badahertz52/draggable-ts","name":"@badahertz52/draggable-ts","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@badahertz52/draggable-ts","version":"0.1.0","author":{"name":"badahertzt52"},"repository":{"type":"git","url":"git+https://github.com/BadaHertz52/draggable-ts.git"},"private":false,"module":"dist/index.js","main":"dist/index.js","types":"dist/index.d.ts","dependencies":{"@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","@types/jest":"^27.5.2","@types/node":"^16.18.38","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@types/underscore":"^1.11.5","gh-pages":"^5.0.0","react":"^18.2.0","react-dom":"^18.2.0","react-icons":"^4.10.1","react-scripts":"5.0.1","sass":"^1.63.6","typescript":"^4.9.5","underscore":"^1.13.6","web-vitals":"^2.1.4"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","publish":"rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files && tsc","predeploy":"npm run build","deploy":"gh-pages -d build"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.22.9","@babel/preset-react":"^7.22.5"},"babel":{"presets":["@babel/preset-react"]},"homepage":"https://badahertz52.github.io/draggable-ts","gitHead":"ae1f919c081ca5c64da0db3062b6c0786b00f285","description":"<img src=\"./draggable.gif\" alt=\"draggable-sample\" width=\"300px\" >","bugs":{"url":"https://github.com/BadaHertz52/draggable-ts/issues"},"_id":"@badahertz52/draggable-ts@0.1.0","_nodeVersion":"16.13.1","_npmVersion":"8.15.1","dist":{"integrity":"sha512-C+clFX2aNSvwxtAL/q/6d1PUH5SeT8tFEThX/ZL4u6TDy8clGL5mOnenqau3v0uoUvbPKt5ADDv2jbYqtAGOtg==","shasum":"858e31fd7f3952238c7e5ede8b2dd35879918632","tarball":"https://registry.npmjs.org/@badahertz52/draggable-ts/-/draggable-ts-0.1.0.tgz","fileCount":15,"unpackedSize":1328219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJbx0rA9aCzU6/M6ElogpUgGnqhLCcK55QnPaVMI7jWwIhAJ399inXJ7V0HgR/lXXMqBAfic0quclcxRTgUpCd+0FY"}]},"_npmUser":{"name":"badahertz52","email":"badahertz52@gmail.com"},"directories":{},"maintainers":[{"name":"badahertz52","email":"badahertz52@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/draggable-ts_0.1.0_1691929291197_0.09827482510709307"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-13T12:21:31.100Z","0.1.0":"2023-08-13T12:21:31.536Z","modified":"2023-08-13T12:21:31.796Z"},"maintainers":[{"name":"badahertz52","email":"badahertz52@gmail.com"}],"description":"<img src=\"./draggable.gif\" alt=\"draggable-sample\" width=\"300px\" >","homepage":"https://badahertz52.github.io/draggable-ts","repository":{"type":"git","url":"git+https://github.com/BadaHertz52/draggable-ts.git"},"author":{"name":"badahertzt52"},"bugs":{"url":"https://github.com/BadaHertz52/draggable-ts/issues"},"readme":"# Draggable-ts\n\n<img src=\"./draggable.gif\" alt=\"draggable-sample\" width=\"300px\" >\n\nDraggable-ts는 React와 typescript 환경에서 아이템을 드래스해서 다른 위치로 이동시키고,버튼을 통해 아이템을 다른 아이템의 앞 또는 뒤로 보내는 기능을 제공합니다.\n\n## Getting started\n\n### Installation\n\n```bash\n  npm i @badahertz52/draggable-ts\n```\n\n### Usage\n\n#### Draggable props\n\n```ts\ntype SaveDataParams = {\n  id: string;\n  x: number;\n  y: number;\n  zIndex: number;\n};\n\ntype DraggableProps = {\n  id: string;\n  children: ReactNode;\n  draggableGroupRef: RefObject<HTMLDivElement>;\n  x: number;\n  y: number;\n  zIndex?: number;\n  opacity?: number;\n  isBtnChanger?: boolean;\n  saveData?: (props: SaveDataParams) => void;\n};\n```\n\n| prop              | 설명                                                                                                             |\n| ----------------- | ---------------------------------------------------------------------------------------------------------------- |\n| id                | Draggable 요소의 id                                                                                              |\n| children          | Draggable을 적용시킬 React Node                                                                                  |\n| draggableGroupRef | draggableGroup 은 Draggable 요소들을 감싸는, Draggable의 부모 요소로, draggableGroup을 useRef로 지정한 RefObject |\n| x                 | children의 x 좌표                                                                                                |\n| y                 | children의 y 좌표                                                                                                |\n| zIndex            | children의 zIndex, 기본값: 0                                                                                     |\n| opacity           | children의 opacity , 기본값:1                                                                                    |\n| isBtnChanger      | children의 zIndex를 변경시킬 버튼의 존재 유무                                                                    |\n| saveData          | children의 위치나 zIndex가 변경될 때 변경 사항을 parameter로 받아서 활용할 수 있는 함수                          |\n\n#### Structure\n\n```bash\n draggable-group\n              L draggable\n                    L draggable-children\n                  ....\n              L draggable\n```\n\n#### ⚠️ 주의 사항\n\ndraggable-group (draggable 요소들을 감싸는 부모 요소)의 width,height를 지정해야 draggable이 정상적으로 작동합니다.\n\n### Example\n\n```ts\nconst App = () => {\n  //....\n  const draggableGroupRef = useRef<HTMLDivElement>(null);\n  const saveData = (params: SaveDataParams) => {\n    console.log(\"draggable data\", params);\n  };\n  const draggableGroupStyle = {\n    width: \"500px\",\n    height: \"500px\",\n  };\n  const sampleStyle = {\n    width: \"100px\",\n    height: \"100px\",\n    backgroundColor: \"#fff7a5\",\n    textAlign: \"center\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  };\n  //...\n  return (\n    <div\n      className=\"draggable-group\"\n      ref={draggableGroupRef}\n      style={draggableGroupStyle}\n    >\n      <Draggable\n        id=\"drag1\"\n        x={100}\n        y={100}\n        saveData={saveData}\n        draggableGroupRef={draggableGroupRef}\n      >\n        <div className=\"sample1\" style={sampleStyle}>\n          <div>\n            <p> sample1</p>\n          </div>\n        </div>\n      </Draggable>\n      <Draggable\n        id=\"drag2\"\n        x={300}\n        y={600}\n        zIndex={3}\n        draggableGroupRef={draggableGroupRef}\n      >\n        <div className=\"sample2\" style={sampleStyle}>\n          <div>\n            <p> sample2</p>\n          </div>\n        </div>\n      </Draggable>\n    </div>\n  );\n};\n```\n","readmeFilename":"README.md"}