{"id":19014222,"url":"https://github.com/spritejs/next-draggable","last_synced_at":"2025-04-23T00:42:37.271Z","repository":{"id":36399762,"uuid":"224151068","full_name":"spritejs/next-draggable","owner":"spritejs","description":"let @spritejs/next spritejs v3 can draggable，让 spritejs v3 对象拥有 draggable 的能力 ","archived":false,"fork":false,"pushed_at":"2023-01-07T12:10:05.000Z","size":832,"stargazers_count":4,"open_issues_count":15,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-23T00:42:29.058Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/spritejs.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":"2019-11-26T09:21:47.000Z","updated_at":"2021-03-03T03:49:56.000Z","dependencies_parsed_at":"2023-01-17T01:08:59.344Z","dependency_job_id":null,"html_url":"https://github.com/spritejs/next-draggable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fnext-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fnext-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fnext-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fnext-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/next-draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348891,"owners_count":21415907,"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-11-08T19:28:25.577Z","updated_at":"2025-04-23T00:42:37.255Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-draggable\n\nlet @spritejs/next can draggable，让 sprite 对象拥有 draggable 的能力\n\n### 运行 demo\n\n```\nnpm install\n\nnpm start\n```\n\n通过浏览器访问可以查看具体 demo\n\n![next-draggable](/next-draggable.png)\n\n### 安装 next-draggable 依赖\n\n```\n  npm install next-draggable --save\n```\n\n### 作为 spritejs 插件使用\n\n```javascript\n\n  // draggable与droppable方法注册到Node上\n  import { install } from 'next-draggable'\n  install(spritejs);\n  …\n\n  let group = new Group();\n  group.draggable();\n  // group.draggable(false); group.draggable({destroy:true}) 取消注册drag\n\n  group.droppable()//注册drop事件\n\n  // group.droppable(false) ;group.droppable({destroy:true}) 取消注册drop\n\n  group.addEventListener('drag', (evt) =\u003e {\n    console.log('drag')\n  });\n\n  group.addEventListener('drop', (evt) =\u003e {\n    console.log('drop')\n  });\n\n  group.addEventListener('dragenter', (evt) =\u003e {\n    console.log('dragenter')\n  });\n\n  group.addEventListener('dragleave', (evt) =\u003e {\n    console.log('dragleave')\n  });\n\n  group.addEventListener('dragover', (evt) =\u003e {\n    console.log('dragover')\n  });\n\n  let sprite = new Sprite();\n  //表示在 [0,0] 与 [300,300] 这两点矩形之间拖动 [xmin,ymin,xmax,ymax]，不设置表示不控制拖动范围\n  sprite.draggable({dragRect:[0,0,300,300]})\n\n  // 取消设置dragRect方法\n  //sprite.draggable({dragRect:[]})\n\n  //表示拖动的范围大于坐标[0,0]\n  //sprite.draggable({dragRect:[0,0]});\n\n  /**拖动过程中，有三个事件 dragstart、drag、dragend**/\n  sprite.addEventListener('dragstart',function(event){\n    console.log('dragstart');\n  });\n\n  sprite.addEventListener('drag',function(event){\n    console.log('drag');\n  });\n\n  sprite.addEventListener('dragend',function(event){\n    console.log('dragend');\n  });\n\n\n  //取消元素拖动\n  sprite.draggable(false);\n\n```\n\n### 作为方法使用\n\n```javascript\n\n  import { draggable, droppable } from 'next-draggable'\n\n  …\n\n  let group = draggable(new Group());\n\n  // draggable(group,false); draggable(group,{destroy,true}) 取消注册drag\n\n  droppable(group) //注册drop事件\n\n  // droppable(group,false) ;droppable(group,{destroy:true}) 取消注册drop\n\n  group.addEventListener('drag', (evt) =\u003e {\n    console.log('drag')\n  });\n\n  group.addEventListener('drop', (evt) =\u003e {\n    console.log('drop')\n  });\n\n  group.addEventListener('dragenter', (evt) =\u003e {\n    console.log('dragenter')\n  });\n\n  group.addEventListener('dragleave', (evt) =\u003e {\n    console.log('dragleave')\n  });\n\n  group.addEventListener('dragover', (evt) =\u003e {\n    console.log('dragover')\n  });\n\n  let sprite = draggable(new Sprite());\n\n  //表示在 [0,0] 与 [300,300] 这两点矩形之间拖动 [xmin,ymin,xmax,ymax]，不设置表示不控制拖动范围\n  draggable(sprite,{dragRect:[0,0,300,300]});\n  //draggable(sprite,{dragRect:[]});\n\n  //表示拖动的范围大于坐标[0,0]\n  //draggable(sprite,{dragRect:[0,0]});\n\n  /**拖动过程中，有三个事件 dragstart、drag、dragend**/\n  sprite.addEventListener('dragstart',function(event){\n    console.log('dragstart');\n  });\n\n  sprite.addEventListener('drag',function(event){\n    console.log('drag');\n  });\n\n  sprite.addEventListener('dragend',function(event){\n    console.log('dragend');\n  });\n\n\n  //取消元素拖动\n  draggable(sprite,false);\n\n```\n\n### 事件列表：\n\n| 事件      | 描述                                             | 其它                                                           |\n| --------- | ------------------------------------------------ | -------------------------------------------------------------- |\n| dragstart | 开始拖动对象                                     |                                                                |\n| drag      | 正在拖动对象                                     |                                                                |\n| dragend   | 停止拖动对象                                     |                                                                |\n| dragover  | 一个 draggable 对象在另一个 droppable 对象上拖动 |                                                                |\n| dragenter | 一个 draggable 对象在进入一个 droppable 对象上   | draggable 进入 droppable 判断点为 draggable 对象最小矩形的中心 |\n| dragleave | 一个 draggable 对象离开一个 droppable 对象上     |                                                                |\n| drop      | 一个 draggable 对象放在一个 droppable 对象上     |                                                                |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fnext-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fnext-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fnext-draggable/lists"}