{"id":13733214,"url":"https://github.com/jesstelford/aframe-click-drag-component","last_synced_at":"2025-03-17T14:14:21.527Z","repository":{"id":10986427,"uuid":"67906905","full_name":"jesstelford/aframe-click-drag-component","owner":"jesstelford","description":"Aframe Click \u0026 Drag Component","archived":false,"fork":false,"pushed_at":"2022-06-10T00:00:29.000Z","size":2652,"stargazers_count":105,"open_issues_count":12,"forks_count":48,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-03T21:57:11.930Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jesstelford.github.io/aframe-click-drag-component/","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/jesstelford.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}},"created_at":"2016-09-11T03:04:34.000Z","updated_at":"2025-02-26T04:52:47.000Z","dependencies_parsed_at":"2022-09-16T14:10:32.739Z","dependency_job_id":null,"html_url":"https://github.com/jesstelford/aframe-click-drag-component","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesstelford%2Faframe-click-drag-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesstelford%2Faframe-click-drag-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesstelford%2Faframe-click-drag-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jesstelford%2Faframe-click-drag-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jesstelford","download_url":"https://codeload.github.com/jesstelford/aframe-click-drag-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244047646,"owners_count":20389206,"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-08-03T03:00:39.472Z","updated_at":"2025-03-17T14:14:21.443Z","avatar_url":"https://github.com/jesstelford.png","language":"JavaScript","funding_links":[],"categories":["Web-Based Frameworks","JavaScript"],"sub_categories":["Motion Controllers inside Unity!"],"readme":"# Looking for maintainers\n\nI have recently [started a new business](https://mobile.twitter.com/ceteio), which means I no longer have time to maintain this project.\n\nPlease [reach out](https://github.com/jesstelford) if you are interested in updating this component to the latest versions of aframe, merging the pending PRs, and resolving the list of issues ❤️\n\n# aframe-click-drag-component\n\nA Click \u0026 Drag component for [A-Frame](https://aframe.io).\n\nEntities with the `click-drag` component can be click and dragged around the 3D\nscene. Even works whle the camera is moving or rotating!\n\n### Events\n\n**dragstart**\n\nEmitted with the following info:\n\n- `offset: {x, y, z}` - The offset from entity center to drag position.\n- `depth` - the perpendicular distance from the screen to align the entity while\n  dragging\n- `clientX` - the mouse event's `clientX` value\n- `clientY` - the mouse event's `clientY` value\n\n**dragmove**\n\nEmitted with the following info:\n\n- `nextPosition: {x, y, z}` - The next world position of the entity.\n- `clientX` - the mouse event's `clientX` value\n- `clientY` - the mouse event's `clientY` value\n\n**dragend**\n\nEmitted with the following info:\n\n- `offset: {x, y, z}` - The offset from entity center to drag position.\n- `velocity: {x, y, z}` - The smoothed velocity of the entity at dragend time.\n- `depth` - the perpendicular distance from the screen to align the entity while\n  dragging\n- `clientX` - the final mouse event's `clientX` value\n- `clientY` - the final mouse event's `clientY` value\n\n### Applying click-drag conditionally\nYou can conditionally apply `click-drag` behaviors by specifying an `enabled`\nattribute in your `click-drag` property:\n\n```javascript\n...\n\u003ca-sphere click-drag=\"enabled: false\" position=\"0 1.25 -1\" radius=\"1.25\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n...\n```\n\n### Installation\n\n#### Browser\n\nUse directly from the unpkg CDN:\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://aframe.io/releases/0.3.0/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/aframe-click-drag-component\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    registerAframeClickDragComponent(window.AFRAME);\n  \u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003ca-scene\u003e\n    \u003ca-sphere click-drag position=\"0 1.25 -5\" radius=\"1.25\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n    \u003ca-camera look-controls-enabled=\"false\"\u003e\u003c/a-camera\u003e\n  \u003c/a-scene\u003e\n\u003c/body\u003e\n```\n\n#### npm\n\nInstall via npm:\n\n```bash\nnpm install aframe-click-drag-component\n```\n\nThen register and use.\n\n```javascript\nimport aframe from 'aframe';\nimport registerClickDrag from 'aframe-click-drag-component';\nregisterClickDrag(aframe);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjesstelford%2Faframe-click-drag-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjesstelford%2Faframe-click-drag-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjesstelford%2Faframe-click-drag-component/lists"}