{"id":15354820,"url":"https://github.com/bokuweb/react-draggable-custom","last_synced_at":"2025-04-15T06:16:50.871Z","repository":{"id":57100563,"uuid":"55847246","full_name":"bokuweb/react-draggable-custom","owner":"bokuweb","description":"[deprecated]","archived":false,"fork":false,"pushed_at":"2023-12-15T02:28:43.000Z","size":1487,"stargazers_count":4,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T06:16:43.504Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/bokuweb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-09T14:00:07.000Z","updated_at":"2017-12-19T20:01:45.000Z","dependencies_parsed_at":"2024-10-01T12:21:17.965Z","dependency_job_id":null,"html_url":"https://github.com/bokuweb/react-draggable-custom","commit_stats":null,"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokuweb%2Freact-draggable-custom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokuweb%2Freact-draggable-custom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokuweb%2Freact-draggable-custom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bokuweb%2Freact-draggable-custom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bokuweb","download_url":"https://codeload.github.com/bokuweb/react-draggable-custom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016643,"owners_count":21198833,"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":[],"created_at":"2024-10-01T12:21:13.357Z","updated_at":"2025-04-15T06:16:50.854Z","avatar_url":"https://github.com/bokuweb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Draggable [![Build Status](https://travis-ci.org/mzabriskie/react-draggable.svg?branch=master)](https://travis-ci.org/mzabriskie/react-draggable)\n\nA simple component for making elements draggable.\n\nforked from mzabriskie/react-draggable\n\n[View the Changelog](CHANGELOG.md)\n\n### Demo\n\n[View Demo](http://mzabriskie.github.io/react-draggable/example/)\n\n\n### Installing\n\n```bash\n$ npm install react-draggable\n```\n\nIf you aren't using browserify/webpack, a\n[UMD version of react-draggable](dist/react-draggable.js) is available. It is updated per-release only.\nThis bundle is also what is loaded when installing from npm. It expects external `React` and `ReactDOM`.\n\nIf you want a UMD version of the latest `master` revision, you can generate it yourself from master by cloning this\nrepository and running `$ make`. This will create umd dist files in the `dist/` folder.\n\n### Exports\n\nThe default export is `\u003cDraggable\u003e`. At the `.DraggableCore` property is `\u003cDraggableCore\u003e`. Here's how to use it:\n\n```js\n// ES6\nimport Draggable from 'react-draggable'; // The default\nimport {DraggableCore} from 'react-draggable'; // \u003cDraggableCore\u003e\nimport Draggable, {DraggableCore} from 'react-draggable'; // Both at the same time\n\n// CommonJS\nlet Draggable = require('react-draggable');\nlet DraggableCore = Draggable.DraggableCore;\n```\n\n## Draggable\n\nA `\u003cDraggable\u003e` element wraps an existing element and extends it with new event handlers and styles.\nIt does not create a wrapper element in the DOM.\n\nDraggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current\npositioning (relative, absolute, or static). Elements can also be moved between drags without incident.\n\nIf the item you are dragging already has a CSS Transform applied, it will be overwritten by `\u003cDraggable\u003e`. Use\nan intermediate wrapper (`\u003cDraggable\u003e\u003cspan\u003e...\u003c/span\u003e\u003c/Draggable\u003e`) in this case.\n\n\n### Draggable API\n\nThe `\u003cDraggable/\u003e` component transparently adds draggable to whatever element is supplied as `this.props.children`.\n**Note**: Only a single element is allowed or an Error will be thrown.\n\nFor the `\u003cDraggable/\u003e` component to correctly attach itself to its child, the child element must provide support for the following props:\n- `style` is used to give the transform css to the child.\n- `className` is used to apply the proper classes to the object being dragged.\n- `onMouseDown` is used along with onMouseUp to keep track of dragging state.\n- `onMouseUp` is used along with onMouseDown to keep track of dragging state.\n- `onTouchStart` is used along with onTouchEnd to keep track of dragging state.\n- `onTouchEnd` is used along with onTouchStart to keep track of dragging state.\n\nReact.DOM elements support the above six properties by default, so you may use those elements as children without any changes. If you wish to use a React component you created, you might find [this React page](https://facebook.github.io/react/docs/transferring-props.html) helpful.\n\nProps:\n\n```js\n{\n// Called when dragging starts. If `false` is returned from this method,\n// dragging will cancel.\n// These callbacks are called with the arity:\n// (event: Event,\n//  {\n//     position: {left: number, top: number},\n//     deltaX: number,\n//     deltaY: number\n//  }\n// )\nonStart: Function,\n\n// Called while dragging.\nonDrag: Function,\n\n// Called when dragging stops.\nonStop: Function,\n\n// Called whenever the user mouses down. Called regardless of handle or\n//  disabled status.\nonMouseDown: Function,\n\n// Specifies the `x` and `y` that the dragged item should start at.\n// This is generally not necessary to use (you can use absolute or relative\n// positioning of the child directly), but can be helpful for uniformity in\n// your callbacks and with css transforms.\nstart: {x: number, y: number},\n\n// If true, will not call any drag handlers.\ndisabled: boolean,\n\n// Specifies a selector to be used to prevent drag initialization.\n// Example: '.body'\ncancel: string,\n\n// Specifies a selector to be used as the handle that initiates drag.\n// Example: '.handle'\nhandle: string,\n\n// If set to `true`, will allow dragging on non left-button clicks.\nallowAnyClick: boolean,\n\n// Determines which axis the draggable can move. This only affects\n// flushing to the DOM. Callbacks will still include all values.\n// Accepted values:\n// - `both` allows movement horizontally and vertically (default).\n// - `x` limits movement to horizontal axis.\n// - `y` limits movement to vertical axis.\n// - 'none' stops all movement.\naxis: string,\n\n// Specifies movement boundaries. Accepted values:\n// - `parent` restricts movement within the node's offsetParent\n//    (nearest node with position relative or absolute), or\n// - An object with `left, top, right, and bottom` properties.\n//   These indicate how far in each direction the draggable\n//   can be moved.\nbounds: {left: number, top: number, right: number, bottom: number} | string,\n\n// Specifies the x and y that dragging should snap to.\ngrid: [number, number],\n\n// Specifies the zIndex to use while dragging.\nzIndex: number\n}\n```\n\n\nNote that sending `className`, `style`, or `transform` as properties will error - set them on the child element\ndirectly.\n\n\n### Draggable Usage\n\n```js\nvar React = require('react'),;\nvar ReactDOM = require('react-dom');\nvar Draggable = require('react-draggable');\n\nvar App = React.createClass({\n\thandleStart: function (event, ui) {\n\t\tconsole.log('Event: ', event);\n\t\tconsole.log('Position: ', ui.position);\n\t},\n\n\thandleDrag: function (event, ui) {\n\t\tconsole.log('Event: ', event);\n    console.log('Position: ', ui.position);\n\t},\n\n\thandleStop: function (event, ui) {\n\t\tconsole.log('Event: ', event);\n    console.log('Position: ', ui.position);\n\t},\n\n\trender: function () {\n\t\treturn (\n\t\t\t\u003cDraggable\n\t\t\t\taxis=\"x\"\n\t\t\t\thandle=\".handle\"\n\t\t\t\tstart={{x: 0, y: 0}}\n\t\t\t\tgrid={[25, 25]}\n\t\t\t\tzIndex={100}\n\t\t\t\tonStart={this.handleStart}\n\t\t\t\tonDrag={this.handleDrag}\n\t\t\t\tonStop={this.handleStop}\u003e\n\t\t\t\t\u003cdiv\u003e\n\t\t\t\t\t\u003cdiv className=\"handle\"\u003eDrag from here\u003c/div\u003e\n\t\t\t\t\t\u003cdiv\u003eThis readme is really dragging on...\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/Draggable\u003e\n\t\t);\n\t}\n});\n\nReactDOM.render(\u003cApp/\u003e, document.body);\n```\n\n## \u003cDraggableCore\u003e\n\nFor users that require more control, a `\u003cDraggableCore\u003e` element is available. This is useful for more programmatic\nusage of the element. See [React-Resizable](https://github.com/STRML/react-resizable) and\n[React-Grid-Layout](https://github.com/STRML/react-grid-layout) for some examples of this.\n\n`\u003cDraggableCore\u003e` is a useful building block for other libraries that simply want to abstract browser-specific\nquirks and receive callbacks when a user attempts to move an element. It does not set styles or transforms\non itself.\n\n### DraggableCore API\n\n`\u003cDraggableCore\u003e` takes all of the above `\u003cDraggable\u003e` options, with the exception of:\n\n* `axis`\n* `bounds`\n* `start`\n* `zIndex`\n\nDrag callbacks are called with the following parameters:\n\n```js\n(\n event: Event,\n ui:{\n      node: Node\n      position:\n        {\n        \t// lastX + deltaX === clientX\n          deltaX: number, deltaY: number,\n          lastX: number, lastY: number,\n          clientX: number, clientY: number\n        }\n    }\n)\n```\n\n----\n\n### Contributing\n\n- Fork the project\n- Run the project in development mode: `$ npm run dev`\n- Make changes.\n- Add appropriate tests\n- `$ npm test`\n- If tests don't pass, make them pass.\n- Update README with appropriate docs.\n- Commit and PR\n\n### Release checklist\n\n- Update CHANGELOG\n- `make release-patch`, `make release-minor`, or `make-release-major`\n- `make publish`\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbokuweb%2Freact-draggable-custom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbokuweb%2Freact-draggable-custom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbokuweb%2Freact-draggable-custom/lists"}