{"id":16504868,"url":"https://github.com/bcakmakoglu/revue-draggable","last_synced_at":"2025-04-05T06:06:25.107Z","repository":{"id":36988362,"uuid":"385393728","full_name":"bcakmakoglu/revue-draggable","owner":"bcakmakoglu","description":"A Vue component that makes anything draggable 🤏 Easy to use and control. Supports Vue3 and Vue2 🦾","archived":false,"fork":false,"pushed_at":"2024-09-05T09:17:53.000Z","size":19201,"stargazers_count":200,"open_issues_count":15,"forks_count":16,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-29T05:02:58.102Z","etag":null,"topics":["draggable","javascript","nuxt","typescript","vue","vue2","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://draggable-docs.vueflow.dev","language":"TypeScript","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/bcakmakoglu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"bcakmakoglu"}},"created_at":"2021-07-12T21:57:25.000Z","updated_at":"2025-03-27T02:44:42.000Z","dependencies_parsed_at":"2024-06-18T17:04:36.658Z","dependency_job_id":"69f7eb46-69a8-4c52-abf7-21839a30a667","html_url":"https://github.com/bcakmakoglu/revue-draggable","commit_stats":{"total_commits":262,"total_committers":2,"mean_commits":131.0,"dds":0.007633587786259555,"last_synced_commit":"380d4298a34ff3d47ead67f9ac4a526ba162b398"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcakmakoglu%2Frevue-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcakmakoglu%2Frevue-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcakmakoglu%2Frevue-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcakmakoglu%2Frevue-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bcakmakoglu","download_url":"https://codeload.github.com/bcakmakoglu/revue-draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294536,"owners_count":20915340,"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":["draggable","javascript","nuxt","typescript","vue","vue2","vue3","vuejs"],"created_at":"2024-10-11T15:07:46.768Z","updated_at":"2025-04-05T06:06:25.085Z","avatar_url":"https://github.com/bcakmakoglu.png","language":"TypeScript","funding_links":["https://github.com/sponsors/bcakmakoglu"],"categories":["TypeScript"],"sub_categories":[],"readme":"[![Revue Draggable](./docs/static/revue-draggable.gif)](https://draggable.vueflow.dev)\n\n![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/revue-draggable)\n[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-draggable.svg)](https://david-dm.org/bcakmakoglu/revue-draggable)\n[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-draggable.svg?type=dev)](https://david-dm.org/bcakmakoglu/revue-draggable?type=dev)\n![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/revue-draggable)\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/revue-draggable)\n![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/revue-draggable)\n\n**Make your Vue components draggable. 🤏**\n\n**Supports Vue 2 and Vue 3!** Comes with a 🔋 batteries included component / directive / composable or\nfor users who want more control a simple abstraction over drag events with the core, wich is also available\nas a component / directive / composable.\n\nBased on [React Draggable](https://www.npmjs.com/package/react-draggable#draggablecore).\n\nCheck the [Docs 📔](https://draggable-docs.vueflow.dev) for an in-depth explanation and\nthe [Demo 🪄](https://draggable.vueflow.dev) to see Revue Draggable in action.\n\n## Table of Contents\n\n* [🛠 Setup](#-setup)\n\n    * [Registering Revue Draggable ](#-registering-revue-draggable)\n\n* [🎮 Quickstart](#-quickstart)\n\n* [🧪 Development](#-development)\n\n* [🕵🏻‍♂️ Tests](#-tests)\n\n* [💝 Sponsors](#-sponsors)\n\n## 🛠 Setup\n\n```bash\n$ npm i --save @braks/revue-draggable\n\n# or\n$ yarn add @braks/revue-draggable\n\n# or\n$ pnpm add @braks/revue-draggable\n```\n\nFor Vue2 add the composition-api to your dependencies (if you're using Vue \u003c 2.7).\n```bash\n$ yarn add @braks/revue-draggable @vue/composition-api\n\n# or\n$ npm i --save @braks/revue-draggable @vue/composition-api\n```\n\n### Using the components\n\n#### Webpack (Vue2)\n\n```js\n// webpack.config.js\n\nresolve: {\n    alias: {\n        vue: 'vue/dist/vue.js'\n    }\n}\n```\n\n#### [Nuxt](https://nuxtjs.org/)\n\n```ts {}[nuxt.config.ts]\n// nuxt.config.ts\nexport default {\n    alias: {\n        vue: 'vue/dist/vue.js'\n    }\n}\n```\n\n### 🔌 Registering Revue Draggable \n\n```ts {}[main.ts]\n// Vue3\nimport { createApp } from 'vue';\nimport Draggable, { DraggablePlugin, DraggableDirective } from '@braks/revue-draggable';\n\nconst app = createApp();\n\n// Use as Plugin (registers directives and components)\napp.use(DraggablePlugin);\n\n// or\napp.directive('draggable', DraggableDirective)\napp.component('Draggable', Draggable);\n\napp.mount('#root');\n```\n\n```ts {}[main.ts]\n// Vue2 \nimport Vue from 'vue';\nimport { DraggablePlugin, DraggableDirective } from '@braks/revue-draggable';\n\n// Use as Plugin\nVue.use(DraggablePlugin)\n\n// or\nVue.directive('draggable', DraggableDirective)\nVue.component('Draggable', Draggable)\n```\n\n## 🎮 Quickstart\n\nThe easiest way to make your elements draggable is by using the **DraggableDirective** which will handle everything for you\nwith no configuration necessary.\n\n````vue {}[App.vue]\n\u003cdiv v-draggable=\"/* Pass DraggableProps as binding value here */\" class=\"box\"\u003eI use a directive to make myself draggable\u003c/div\u003e\n````\n\nOr use the component wrapper.\n(In Vue2 make sure to include the full-build, runtime-build only works for Vue3.)\n````vue {}[App.vue]\n\u003cDraggable\u003e\n  \u003cdiv class=\"box\"\u003eI use a wrapper\u003c/div\u003e\n\u003c/Draggable\u003e\n````\n\nCheck [the example file](./example/App.vue) for more in-detail examples like dropping elements, setting boundaries or syncing states.\n\n## 🧪 Development\n\nThis project uses [Vite](https://vitejs.dev/) for development and [Rollup](https://rollupjs.org/) to create a distribution.\n\n```bash\n# start (dev)\n$ pnpm dev\n\n# build app\n$ pnpm build\n\n# serve app from build\n$ pnpm serve\n\n# build dist\n$ pnpm build:dist\n```\n\n## 🐛 Debugging\n\nSet the environment variable `DRAGGABLE_DEBUG` to enable logs on drag handlers.\n\n## 🕵🏻‍♂️ Tests\n\nTesting is done with Cypress.\nYou can find the specs in the [cypress directory](/cypress);\n```bash\n$ pnpm ci # starts test server and runs tests, make sure port 3000 is open\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcakmakoglu%2Frevue-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbcakmakoglu%2Frevue-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcakmakoglu%2Frevue-draggable/lists"}