{"id":20815864,"url":"https://github.com/aurbano/react-dragger","last_synced_at":"2025-05-07T12:40:33.674Z","repository":{"id":143905110,"uuid":"97049394","full_name":"aurbano/react-dragger","owner":"aurbano","description":"Tiny React Dragging library (mobile ready)","archived":false,"fork":false,"pushed_at":"2018-03-20T12:45:41.000Z","size":964,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T08:21:27.763Z","etag":null,"topics":["component","drag","draggable","react","reactjs","touch-compatible"],"latest_commit_sha":null,"homepage":"https://aurbano.github.io/react-dragger/","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/aurbano.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":"2017-07-12T20:30:13.000Z","updated_at":"2023-07-07T14:34:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"24c9d152-2350-425c-bda2-527371b05bd8","html_url":"https://github.com/aurbano/react-dragger","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurbano%2Freact-dragger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurbano%2Freact-dragger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurbano%2Freact-dragger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aurbano%2Freact-dragger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aurbano","download_url":"https://codeload.github.com/aurbano/react-dragger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252878880,"owners_count":21818664,"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":["component","drag","draggable","react","reactjs","touch-compatible"],"created_at":"2024-11-17T21:26:37.305Z","updated_at":"2025-05-07T12:40:33.665Z","avatar_url":"https://github.com/aurbano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Dragger\n\u003e Tiny React Dragging library - mobile ready and with no dependencies!\n\n[![Travis](https://img.shields.io/travis/aurbano/react-dragger.svg)](https://travis-ci.org/aurbano/react-dragger)\n[![npm](https://img.shields.io/npm/v/react-dragger.svg)](https://www.npmjs.com/package/react-dragger)\n[![Coverage Status](https://coveralls.io/repos/github/aurbano/react-dragger/badge.svg?branch=master)](https://coveralls.io/github/aurbano/react-dragger?branch=master)\n[![npm](https://img.shields.io/npm/dm/react-dragger.svg)](https://www.npmjs.com/package/react-dragger)\n[![npm](https://img.shields.io/npm/l/react-dragger.svg)](https://www.npmjs.com/package/react-dragger)\n[![Codacy grade](https://img.shields.io/codacy/grade/e2589a609bdc4c56bd49c232a65dab4e.svg)](https://www.codacy.com/app/aurbano/react-dragger)\n\nI wrote this library because I couldn't find any existing one to make elements draggable super easily, ignoring where they are dropped.\n\nIn some cases you really need an unobtrusive way to make items draggable, this will do just that.\n\nI use React-DnD a lot as well, but sometimes you really just want to make an element draggable :smile:\n\n\n## Installation\n\n```console\n$ npm i react-dragger\n```\nOr if you prefer yarn\n```console\n$ yarn add react-dragger\n```\n\n## Usage\n\n```jsx\n\u003cDragger\n    target={ this.state.ref }\n    onStart={ this.onStart }\n    onDrag={ this.onDrag }\n    onEnd={ this.onEnd }\n    position={ this.state.itemLocation }\n    inverted={ this.props.inverted }\n/\u003e\n```\n\n### Props\n\nDocs on each prop, see them in action in the example below.\n\n#### `target`\n\nElement that will be draggable. This is to scope the mouse/touch event handlers and make sure that it doesn't affect your whole web app.\n\nIt must be a React `ref`, it should also exist, so you may want to check if it's already initialized before rendering the `Dragger` component.\n\n#### `onStart`\n\nThis will be fired when the element starts being dragged.\n\n#### `onDrag`\n\nThis will be fired while the element is being dragged. It will receive an object with the `top` and `left` coordinates of the element.\n\n```js\nonDrag({\n  top: number,\n  left: number,\n});\n```\n\n#### `onEnd`\n\nThis will be fired when the element stops being dragged.\n\n#### `inverted` *(Optional)*\n\nWhether you want the dragging to be inverted (drag mouse up -\u003e element goes down)\n\n## Example\n\nThis example was taken from [`example/app/src/Example.js`](https://github.com/aurbano/react-dragger/blob/master/example/app/src/Example.js) which you can see running at https://aurbano.eu/react-dragger/\n\n```jsx\nimport React from 'react';\nimport Dragger from 'react-dragger';\n\nimport './react-dragger.css';\n\nexport default class Example extends React.PureComponent {\n\n  constructor() {\n    super();\n\n    this.state = {\n      ref: null,\n      dragState: 'waiting',\n      itemLocation: {\n        top: 10,\n        left: 260,\n      },\n    };\n  }\n\n  onStart = () =\u003e {\n    this.setState({\n      dragState: 'started',\n    });\n  };\n\n  onDrag = (itemLocation) =\u003e {\n    this.setState({\n      dragState: 'dragging',\n      itemLocation,\n    });\n  };\n\n  onEnd = () =\u003e {\n    this.setState({\n      dragState: 'ended',\n    });\n  };\n\n  render() {\n    const itemStyle = {\n      ...this.state.itemLocation,\n    };\n    return (\n      \u003cdiv style={ { position: 'relative', marginBottom: '10em' } }\u003e\n        \u003cp\u003eState: \u003ccode\u003e{ this.state.dragState }\u003c/code\u003e\u003c/p\u003e\n        \u003cdiv className='item' ref={ (ref) =\u003e this.setState({ ref }) } style={ itemStyle }\u003e\n          Drag me!\n        \u003c/div\u003e\n\n        { this.state.ref \u0026\u0026 (\n          \u003cDragger\n            target={ this.state.ref }\n            onStart={ this.onStart }\n            onDrag={ this.onDrag }\n            onEnd={ this.onEnd }\n            position={ this.state.itemLocation }\n            inverted={ this.props.inverted }\n          /\u003e\n        ) }\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Contributing\n\nOnly edit the files in the `src` folder. I'll update `dist` manually before publishing new versions to npm.\n\nTo run the tests simply run `npm test`. Add tests as you see fit to the `test` folder, they must be called `{string}.test.js`.\n\n## Meta\n\nCopyright \u0026copy; [Alejandro U. Alvarez](https:/aurbano.eu) 2017. MIT Licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faurbano%2Freact-dragger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faurbano%2Freact-dragger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faurbano%2Freact-dragger/lists"}