{"id":31921885,"url":"https://github.com/rmw-lib/vue3-drag","last_synced_at":"2026-02-25T20:33:49.189Z","repository":{"id":41362481,"uuid":"468663402","full_name":"rmw-lib/vue3-drag","owner":"rmw-lib","description":"a drag and resizeable vue3 component","archived":false,"fork":false,"pushed_at":"2022-04-18T06:47:59.000Z","size":20156,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-22T11:45:46.546Z","etag":null,"topics":["drag","resize","vue3"],"latest_commit_sha":null,"homepage":"","language":"Stylus","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rmw-lib.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-11T08:11:26.000Z","updated_at":"2024-10-10T13:43:25.000Z","dependencies_parsed_at":"2022-09-16T08:21:26.954Z","dependency_job_id":null,"html_url":"https://github.com/rmw-lib/vue3-drag","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rmw-lib/vue3-drag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmw-lib%2Fvue3-drag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmw-lib%2Fvue3-drag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmw-lib%2Fvue3-drag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmw-lib%2Fvue3-drag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rmw-lib","download_url":"https://codeload.github.com/rmw-lib/vue3-drag/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rmw-lib%2Fvue3-drag/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29838133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T19:08:47.527Z","status":"ssl_error","status_checked_at":"2026-02-25T18:59:04.705Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","resize","vue3"],"created_at":"2025-10-13T22:55:13.856Z","updated_at":"2026-02-25T20:33:49.164Z","avatar_url":"https://github.com/rmw-lib.png","language":"Stylus","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- 本文件由 ./make.md 自动生成，请不要直接修改此文件 --\u003e\n\n# @rmw/vue3-drag\n\n---\n\n![](./demo.webp)\n\n## English Readme\n\na drag and resizeable vue3 component\n\n[demo link](https://rmw-lib.github.io/vue3-drag/)\n\nThe component itself does not contain styles, see `src/index.vue` for demo page styles\n\n### install\n\n```\nyarn add -D @rmw/vue3-drag\n```\n\n### use\n\n```js\nimport Drag from '@rmw/vue3-drag'\nimport '@rmw/vue3-drag/drag.css'\n```\n\n```vue\n\u003ctemplate lang=\"pug\"\u003e\nmain\n  drag(:minH=\"150\" :minW=\"100\" :move=\"move\" ref=\"drag\")\n    b\n      i\n        b(v-for=\"(v, k) in meta\") {{ k }} {{ v }}\n        a(href=\"https://github.com/rmw-lib/vue3-drag\" target=\"_blank\")\n\u003c/template\u003e\n\n\u003cscript lang=\"coffee\"\u003e\nimport Drag from './com/drag.vue'\nexport default {\ncomponents:{\n  Drag\n}\nsetup:=\u003e\n  meta = ref()\n  drag = shallowRef()\n  onMounted =\u003e\n    {clientHeight:height, clientWidth:width, offsetLeft:left, offsetTop:top} = elem = drag.value.i\n    meta.value = {\n      top\n      left\n      width\n      height\n    }\n    (\n      new ResizeObserver (li)=\u003e\n        for {target:{clientHeight:height,clientWidth:width}} from li\n          Object.assign meta.value, {\n            width\n            height\n          }\n          break\n        return\n    ).observe elem\n\n    return\n  {\n    drag\n    meta\n    move:({offsetLeft, offsetTop},x,y)=\u003e\n      Object.assign meta.value, {\n        left:offsetLeft+x\n        top:offsetTop+y\n      }\n      return\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"stylus\"\u003e\n@import './styl/init.styl'\n\u003c/style\u003e\n\n\u003cstyle lang=\"stylus\" scoped\u003e\nmain\n  display flex\n  flex 1\n  background url(':/svg/bg.svg') 0 0 / cover no-repeat\n  height 100%\n\n  \u0026\u003ei\n    width 200px\n    height 250px\n    margin-top 50px\n    margin-left 50px\n    display flex\n    position relative\n\n    \u0026:before\n      display flex\n      flex 1\n      content ''\n      border 0 solid rgba(0, 0, 0, 0.5)\n      border-width 100vh 100vw\n      margin -100vh -100vw\n      position absolute\n      width 100%\n      height 100%\n      box-sizing content-box\n      pointer-events none\n      z-index 0\n\n    $space = 24px\n    $circle_radius = 12px\n    $space_circle_radius = $space + $circle_radius\n    $border_width = 2px\n\n    \u0026\u003eb\n      background url(':/svg/o.svg'), url(':/svg/o.svg') 100% 0, url(':/svg/o.svg') 0 100%, url(':/svg/o.svg') 100% 100%, url(':/svg/o.svg') 50% 0, url(':/svg/o.svg') 50% 100%, url(':/svg/o.svg') 0 50%, url(':/svg/o.svg') 100% 50%\n      background-repeat no-repeat\n      background-size 2 * $circle_radius\n      display flex\n      flex 1\n      margin -($space_circle_radius)\n      padding $circle_radius\n      position relative\n\n      \u0026:after, \u0026:before\n        content ''\n        flex 1\n\n      \u0026:after\n        position absolute\n        box-sizing content-box\n        border $border_width solid #fff\n        margin: $circle_radius - $border_width\n        left $space\n        right $space\n        bottom $space\n        top $space\n\n      \u0026:before\n        background url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ff9e40' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\") 0 0 / contain no-repeat\n\n      \u0026\u003ei\n        top $space_circle_radius\n        left @top\n        right @top\n        bottom @top\n        user-select none\n        position absolute\n        display flex\n        flex-direction column\n        align-items center\n        justify-content center\n        z-index 1\n        font-style normal\n\n        \u0026\u003ea\n          background url(':/svg/github.svg') 0 0 / cover\n          height 32px\n          width 32px\n          margin-top 16px\n          position relative\n\n          \u0026:hover\n            \u0026:after\n              content ''\n              background #fff\n              width 100%\n              height 100%\n              position absolute\n              border-radius 16px\n              mix-blend-mode multiply\n\u003c/style\u003e\n```\n\n---\n\n## 中文说明\n\n一个可拖拽、调整大小的vue3组件\n\n[演示链接](https://rmw-lib.github.io/vue3-drag/)\n\n组件本身不包含样式，演示页面样式见 `src/index.vue`\n\n### 安装\n\n```\nyarn add -D @rmw/vue3-drag\n```\n\n### 使用\n\n```js\nimport {drag} from '@rmw/vue3-drag'\nimport '@rmw/vue3-drag/style.css'\n```\n\n```vue\n\u003ctemplate lang=\"pug\"\u003e\nmain\n  drag(:minH=\"150\" :minW=\"100\" :move=\"move\" ref=\"drag\")\n    b\n      i\n        b(v-for=\"(v, k) in meta\") {{ k }} {{ v }}\n        a(href=\"https://github.com/rmw-lib/vue3-drag\" target=\"_blank\")\n\u003c/template\u003e\n\n\u003cscript lang=\"coffee\"\u003e\nimport Drag from './com/drag.vue'\nexport default {\ncomponents:{\n  Drag\n}\nsetup:=\u003e\n  meta = ref()\n  drag = shallowRef()\n  onMounted =\u003e\n    {clientHeight:height, clientWidth:width, offsetLeft:left, offsetTop:top} = elem = drag.value.i\n    meta.value = {\n      top\n      left\n      width\n      height\n    }\n    (\n      new ResizeObserver (li)=\u003e\n        for {target:{clientHeight:height,clientWidth:width}} from li\n          Object.assign meta.value, {\n            width\n            height\n          }\n          break\n        return\n    ).observe elem\n\n    return\n  {\n    drag\n    meta\n    move:({offsetLeft, offsetTop},x,y)=\u003e\n      Object.assign meta.value, {\n        left:offsetLeft+x\n        top:offsetTop+y\n      }\n      return\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"stylus\"\u003e\n@import './styl/init.styl'\n\u003c/style\u003e\n\n\u003cstyle lang=\"stylus\" scoped\u003e\nmain\n  display flex\n  flex 1\n  background url(':/svg/bg.svg') 0 0 / cover no-repeat\n  height 100%\n\n  \u0026\u003ei\n    width 200px\n    height 250px\n    margin-top 50px\n    margin-left 50px\n    display flex\n    position relative\n\n    \u0026:before\n      display flex\n      flex 1\n      content ''\n      border 0 solid rgba(0, 0, 0, 0.5)\n      border-width 100vh 100vw\n      margin -100vh -100vw\n      position absolute\n      width 100%\n      height 100%\n      box-sizing content-box\n      pointer-events none\n      z-index 0\n\n    $space = 24px\n    $circle_radius = 12px\n    $space_circle_radius = $space + $circle_radius\n    $border_width = 2px\n\n    \u0026\u003eb\n      background url(':/svg/o.svg'), url(':/svg/o.svg') 100% 0, url(':/svg/o.svg') 0 100%, url(':/svg/o.svg') 100% 100%, url(':/svg/o.svg') 50% 0, url(':/svg/o.svg') 50% 100%, url(':/svg/o.svg') 0 50%, url(':/svg/o.svg') 100% 50%\n      background-repeat no-repeat\n      background-size 2 * $circle_radius\n      display flex\n      flex 1\n      margin -($space_circle_radius)\n      padding $circle_radius\n      position relative\n\n      \u0026:after, \u0026:before\n        content ''\n        flex 1\n\n      \u0026:after\n        position absolute\n        box-sizing content-box\n        border $border_width solid #fff\n        margin: $circle_radius - $border_width\n        left $space\n        right $space\n        bottom $space\n        top $space\n\n      \u0026:before\n        background url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ff9e40' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\") 0 0 / contain no-repeat\n\n      \u0026\u003ei\n        top $space_circle_radius\n        left @top\n        right @top\n        bottom @top\n        user-select none\n        position absolute\n        display flex\n        flex-direction column\n        align-items center\n        justify-content center\n        z-index 1\n        font-style normal\n\n        \u0026\u003ea\n          background url(':/svg/github.svg') 0 0 / cover\n          height 32px\n          width 32px\n          margin-top 16px\n          position relative\n\n          \u0026:hover\n            \u0026:after\n              content ''\n              background #fff\n              width 100%\n              height 100%\n              position absolute\n              border-radius 16px\n              mix-blend-mode multiply\n\u003c/style\u003e\n```\n\n背景图是用 https://svgwave.in 创建\n\n## 关于\n\n本项目隶属于**人民网络([rmw.link](//rmw.link))** 代码计划。\n\n![人民网络](https://raw.githubusercontent.com/rmw-link/logo/master/rmw.red.bg.svg)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frmw-lib%2Fvue3-drag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frmw-lib%2Fvue3-drag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frmw-lib%2Fvue3-drag/lists"}