{"id":14973826,"url":"https://github.com/nil/v-drag","last_synced_at":"2025-10-11T17:37:39.473Z","repository":{"id":37476703,"uuid":"140869834","full_name":"nil/v-drag","owner":"nil","description":"The simplest way to integrate dragging on Vue.js","archived":false,"fork":false,"pushed_at":"2023-07-19T15:15:53.000Z","size":1122,"stargazers_count":132,"open_issues_count":11,"forks_count":27,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-11T17:37:36.648Z","etag":null,"topics":["drag","draggable","dragging","vue","vue2","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://v-drag.nilvila.com","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/nil.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-07-13T16:30:00.000Z","updated_at":"2025-09-27T10:31:22.000Z","dependencies_parsed_at":"2024-06-18T15:28:27.853Z","dependency_job_id":"5fa50530-4b4d-419c-aeab-70b48731a9a2","html_url":"https://github.com/nil/v-drag","commit_stats":{"total_commits":205,"total_committers":4,"mean_commits":51.25,"dds":0.06829268292682922,"last_synced_commit":"931045c7518602170f28e8752bee0cc9571c22cd"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/nil/v-drag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nil%2Fv-drag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nil%2Fv-drag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nil%2Fv-drag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nil%2Fv-drag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nil","download_url":"https://codeload.github.com/nil/v-drag/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nil%2Fv-drag/sbom","scorecard":{"id":687878,"data":{"date":"2025-08-11","repo":{"name":"github.com/nil/v-drag","commit":"931045c7518602170f28e8752bee0cc9571c22cd"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/24 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/build.yml:1","Warn: no topLevel permission defined: .github/workflows/npm-publish.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Pinned-Dependencies","score":2,"reason":"dependency not pinned by hash detected -- score normalized to 2","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/nil/v-drag/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/nil/v-drag/build.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/nil/v-drag/npm-publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/nil/v-drag/npm-publish.yml/main?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/build.yml:29","Warn: npmCommand not pinned by hash: .github/workflows/npm-publish.yml:20","Info:   0 out of   4 GitHub-owned GitHubAction dependencies pinned","Info:   2 out of   4 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 7 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"24 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67","Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw","Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T01:26:03.899Z","repository_id":37476703,"created_at":"2025-08-22T01:26:03.899Z","updated_at":"2025-08-22T01:26:03.899Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279008121,"owners_count":26084397,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["drag","draggable","dragging","vue","vue2","vue3","vuejs"],"created_at":"2024-09-24T13:49:28.215Z","updated_at":"2025-10-11T17:37:39.457Z","avatar_url":"https://github.com/nil.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v-drag\n\nThe simplest way to integrate drag on Vue.js.\n\nDraggable elements are a common UX pattern, specially on touch screens. But as a developer, you might know how challenging it is to apply it with JavaScript. So to simplify things, v-drag was written. Its aim is to quickly integrate and customize draggable elements on projects using Vue.js.\n\n[![Build status](https://github.com/nil/v-drag/actions/workflows/build.yml/badge.svg)](https://github.com/nil/v-drag/actions/workflows/build.yml)\n[![npm package](https://github.com/nil/v-drag/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/nil/v-drag/actions/workflows/npm-publish.yml)\n[![Version](https://img.shields.io/npm/v/v-drag.svg)](https://www.npmjs.com/package/v-drag)\n[![License](https://img.shields.io/npm/l/v-drag.svg)](https://github.com/nil/v-drag/blob/master/LICENSE)\n\n## Table of contents\n\n1. [Installation](#installation)\n2. [Usage](#usage)\n3. [Options](#options)\n    1. [Axis](#axis)\n    2. [Snap](#snap)\n    3. [Handle](#handle)\n4. [Vue events](#vue-events)\n5. [Global configuration](#global-configuration)\n    1. [Event classes](#event-classes)\n    2. [Remove transitions](#remove-transitions)\n\n## Installation\n\n```sh\nnpm install v-drag --save\n```\n\nv-drag’s source code is also available [uncompressed](https://raw.githubusercontent.com/nil/v-drag/master/src/index.js) and [minified](https://raw.githubusercontent.com/nil/v-drag/master/src/index.min.js).\n\n## Usage\n\nImport v-drag into any file you are planning to use it:\n\n```js\nimport drag from \"v-drag\"\n```\n\n```js\nconst drag = require(\"v-drag\");\n```\n\nThen call the v-drag plugin:\n\n```js\nVue.use(drag, {\n  // global configuration\n});\n```\n\nNo extra setup is necessary at this point. Add the `v-drag` attribute to any element to make it draggable:\n\n```html\n\u003cdiv v-drag\u003eDrag me!\u003c/div\u003e\n```\n\n## Options\n\nThe default behavior for any element with the `v-drag` attribute is to be draggable in any direction and without a handle. However, this can be changed using an object or its equivalent shortcuts:\n\n```html\n\u003cdiv v-drag=\"{ axis: 'x', handle: '#someElement' }\"\u003e\n  \u003cdiv id=\"someElement\"\u003eHandle\u003c/div\u003e\n\u003c/div\u003e\n```\n\nBoth the object and the values can be declared inline, as in the example above, or using the `data` object, computed properties, methods, props,…\n\n### Axis\n\nConstrains the element to move only in one direction: horizontal or vertical.\n\n**Values**\n\n- `all`: all directions `default`\n- `x`: horizontal movement\n- `y`: vertical movement\n\n**Shortcut**\n\n```html\n\u003cdiv v-drag:x\u003eHorizontal\u003c/div\u003e\n```\n\n### Snap\n  \nWhen dragging, the element will snap to the specified grid. You can use either a number or a string with units.\n\n```html\n\u003cdiv v-drag=\"{snap: 100}\"\u003eDrag me in 100px increments\u003c/div\u003e\n```\n\nUsing an array, different values can be declared for each axis:\n\n```html\n\u003cdiv vdrag=\"{snap: [10, 50]}\"\u003e\n  Horizontal: 10px\n  Vertical: 50px\n\u003c/div\u003e\n```\n\n### Handle\n\nInforms that the element can only be dragged using another element, known as handle. It’s not necessary for the handle to be located inside the draggable element, and each element can have more than one handle.\n\n**Values**\n\nHandle’s name must be a selector (the same used to refer to the element in CSS) or a Ref.\n\n**Shortcut**\n\n```html\n\u003cdiv v-drag=\"'.someElement'\"\u003eDon’t drag me\u003c/div\u003e\n\u003cdiv class=\"someElement\"\u003eDrag me\u003c/div\u003e\n```\n\n**Ref**\n\nTo define handles using Refs, you must first set its value in `data` and replace it after the component is mounted:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv v-drag=\"{handle}\"\u003e\n    Drag me using handle\n    \u003cdiv ref=\"drag-handle\"\u003eHandle\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\nexport default {\n  data() {\n    return {\n      handle: undefined,\n    }\n  },\n\n  mounted() {\n    this.$data.handle = this.$refs.dragHandle\n  }\n};\n\n\u003c/script\u003e\n```\n\n## Vue events\n\nThese events are emitted when the user makes the corresponding action.\n\n```html\n\u003cdiv v-drag @v-drag-end=\"someFunction()\"\u003e\n  Event on end\n\u003c/div\u003e\n```\n\n| Event                   | Description                                                                |\n|-------------------------|----------------------------------------------------------------------------|\n| `@v-drag-setup`         | The component has completed the initial setup                              |\n| `@v-drag-start`         | The user has pressed the draggable element and its mouse or finger is down |\n| `@v-drag-moving`        | The user is moving the mouse or finger                                     |\n| `@v-drag-end`           | The user has released its mouse or finger                                  |\n| `@v-drag-update`        | Changes in the configuration of the draggable options                      |\n| `@v-drag-axis-update`   | The axis has been updated                                                  |\n| `@v-drag-handle-update` | The handle has been updated                                                |\n\n## Global configuration\n\n### Event classes\n\nv-drag uses CSS classes to add basic styling to the draggable elements. You can override one or multiple of the default classes when the plugin is called:\n\n```js\nVue.use(drag, {\n  eventClass: {\n    down: \"is-pressed\",\n    move: \"is-moving\"\n  }\n});\n```\n\nThis are the default classes with its values:\n\n| Name        | Default value      | Description                                  \t|\n|-------------|--------------------|----------------------------------------------\t|\n| `initial`   | `drag-draggable`   | The element is draggable                     \t|\n| `hasHandle` | `drag-uses-handle` | The element uses a handle                    \t|\n| `handle`    | `drag-handle`      | The element is the handle of another element \t|\n| `down`      | `drag-down`        | The user has pressed the element             \t|\n| `move`      | `drag-move`        | The user has started to drag the element     \t|\n\n### Remove transitions\n\nBy default, v-drag removes all transition animations to keep the dragging as smooth as possible. However, if you want to enable them, you can:\n\n```js\nVue.use(drag, {\n  removeTransition: false // default: `true`\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnil%2Fv-drag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnil%2Fv-drag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnil%2Fv-drag/lists"}