{"id":13535771,"url":"https://github.com/hilongjw/vue-dragging","last_synced_at":"2025-04-04T13:08:58.849Z","repository":{"id":38352159,"uuid":"73891624","full_name":"hilongjw/vue-dragging","owner":"hilongjw","description":"A sortable list directive with Vue","archived":false,"fork":false,"pushed_at":"2018-12-12T14:05:44.000Z","size":396,"stargazers_count":761,"open_issues_count":24,"forks_count":144,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-31T14:51:30.597Z","etag":null,"topics":["vue"],"latest_commit_sha":null,"homepage":"http://hilongjw.github.io/vue-dragging/","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/hilongjw.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}},"created_at":"2016-11-16T06:39:22.000Z","updated_at":"2025-02-28T03:02:29.000Z","dependencies_parsed_at":"2022-08-25T02:41:46.465Z","dependency_job_id":null,"html_url":"https://github.com/hilongjw/vue-dragging","commit_stats":null,"previous_names":["hilongjw/vue-draging"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-dragging","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-dragging/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-dragging/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-dragging/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hilongjw","download_url":"https://codeload.github.com/hilongjw/vue-dragging/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247181174,"owners_count":20897366,"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":["vue"],"created_at":"2024-08-01T09:00:26.544Z","updated_at":"2025-04-04T13:08:58.827Z","avatar_url":"https://github.com/hilongjw.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form"],"readme":"Awe-dnd\n========\nMakes your elements draggable in Vue.\n\n![](https://github.com/hilongjw/vue-dragging/blob/master/preview.gif)\n\nSee Demo: [http://hilongjw.github.io/vue-dragging/](http://hilongjw.github.io/vue-dragging/)\n\nSome of goals of this project worth noting include:\n\n* support desktop and mobile\n* Vue data-driven philosophy\n* support multi comb drag\n* Supports both of Vue 1.0 and Vue 2.0\n\n\n## Requirements\n\n- Vue: ^1.0.0 or ^2.0.0\n\n## Install\n\nFrom npm:\n\n``` sh\n\n$ npm install awe-dnd --save\n\n```\n\n## Usage\n\n``` javascript\n//main.js\n\nimport VueDND from 'awe-dnd'\n\nVue.use(VueDND)\n```\n\n``` html\n\u003c!--your.vue--\u003e\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n        colors: [{\n            text: \"Aquamarine\"\n        }, {\n            text: \"Hotpink\"\n        }, {\n            text: \"Gold\"\n        }, {\n            text: \"Crimson\"\n        }, {\n            text: \"Blueviolet\"\n        }, {\n            text: \"Lightblue\"\n        }, {\n            text: \"Cornflowerblue\"\n        }, {\n            text: \"Skyblue\"\n        }, {\n            text: \"Burlywood\"\n        }]\n    }\n  },\n  /* if your need multi drag\n  mounted: function() {\n      this.colors.forEach((item) =\u003e {\n          Vue.set(item, 'isComb', false)\n      })\n  } */\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"color-list\"\u003e\n      \u003cdiv\n          class=\"color-item\"\n          v-for=\"color in colors\" v-dragging=\"{ item: color, list: colors, group: 'color' }\"\n          :key=\"color.text\"\n      \u003e{{color.text}}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n# API\n\n`v-dragging=\"{ item: color, list: colors, group: 'color' }\"`\n\n#### Arguments:\n\n * `{item} Object`\n * `{list} Array`\n * `{group} String`\n * `{comb} String`\n\n `group` is unique key of dragable list.\n\n `comb` use for multi drag\n\n#### Example\n\n``` html\n\u003c!-- Vue2.0 --\u003e\n\u003cdiv class=\"color-list\"\u003e\n    \u003cdiv\n        class=\"color-item\"\n        v-for=\"color in colors\" v-dragging=\"{ item: color, list: colors, group: 'color' }\"\n        :key=\"color.text\"\n    \u003e{{color.text}}\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Vue1.0 --\u003e\n\u003cdiv class=\"color-list\"\u003e\n    \u003cdiv\n        class=\"color-item\"\n        v-for=\"color in colors\" v-dragging=\"{ item: color, list: colors, group: 'color', key: color.text }\"\n        track-by=\"text\"\n    \u003e{{color.text}}\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Event\n\n``` html\n\u003cdiv class=\"color-list\"\u003e\n    \u003cdiv\n        class=\"color-item\"\n        v-for=\"color in colors\" v-dragging=\"{ item: color, list: colors, group: 'color', otherData: otherData, comb: 'isComb' }\"\n        :key=\"color.text\"\n    \u003e{{color.text}}\u003c/div\u003e\n\u003c/div\u003e\n```\n\n``` javascript\nexport default {\n  mounted () {\n    this.$dragging.$on('dragged', ({ value }) =\u003e {\n      console.log(value.item)\n      console.log(value.list)\n      console.log(value.otherData)\n    })\n    this.$dragging.$on('dragend', () =\u003e {\n\n    })\n  }\n}\n```\n\n\n\n# License\n\n[The MIT License](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhilongjw%2Fvue-dragging","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhilongjw%2Fvue-dragging","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhilongjw%2Fvue-dragging/lists"}