{"id":19014226,"url":"https://github.com/spritejs/sprite-draggable","last_synced_at":"2025-04-23T00:42:10.615Z","repository":{"id":33681401,"uuid":"160495597","full_name":"spritejs/sprite-draggable","owner":"spritejs","description":"let sprite can draggable，让sprite对象拥有draggable的能力","archived":false,"fork":false,"pushed_at":"2022-12-09T16:26:37.000Z","size":2141,"stargazers_count":14,"open_issues_count":18,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-23T00:42:02.352Z","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":"2018-12-05T09:44:23.000Z","updated_at":"2024-11-15T19:12:01.000Z","dependencies_parsed_at":"2023-01-15T02:15:19.875Z","dependency_job_id":null,"html_url":"https://github.com/spritejs/sprite-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%2Fsprite-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/sprite-draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348894,"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.992Z","updated_at":"2025-04-23T00:42:10.597Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sprite-draggable\nlet sprite can draggable，让sprite对象拥有draggable的能力\n\n### 运行demo\n\n```\nnpm install\n\nnpm start\n```\n访问 http://localhost:9092 查看具体demo\n\n\u003cimage src=\"./sprite-draggable.jpg\" style=\"width:100%\"\u003e\n\n\n\n### 安装sprite-draggable依赖\n``` \n  npm install sprite-draggable --save\n```\n\n### 作为spritejs插件使用\n```javascript\n\n  // draggable与droppable方法注册到BaseSprite上\n  import { install } from 'sprite-draggable'\n  spritejs.use(install);\n  …\n\n  let group = new Group();\n  group.draggable();\n  // group.draggable(false); group.draggable({destroy,true}) 取消注册drag\n\n  group.dropabble()//注册drop事件\n\n  // group.droppable(false) ;group.droppable({destroy:true}) 取消注册drop\n\n  group.on('drag', (evt) =\u003e {\n    console.log('drag')\n  });\n\n  group.on('drop', (evt) =\u003e {\n    console.log('drop')\n  });\n\n  group.on('dragenter', (evt) =\u003e {\n    console.log('dragenter')\n  });\n\n  group.on('dragleave', (evt) =\u003e {\n    console.log('dragleave')\n  });\n\n  group.on('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:[0,0,300,300]})\n\n  //表示拖动的范围大于坐标[0,0]\n  //sprite.draggable({dragRect:[0,0]});\n\n  /**拖动过程中，有三个事件 dragstart、drag、dragend**/\n  sprite.on('dragstart',function(event){\n    console.log('dragstart');\n  });\n\n  sprite.on('drag',function(event){\n    console.log('drag');\n  });\n\n  sprite.on('dragend',function(event){\n    console.log('dragend');\n  });\n\n\n  //取消元素拖动\n  sprite.draggable(false);\n\n```\n### 作为方法使用\n```javascript\n\n  import { draggable, droppable } from 'sprite-draggable'\n\n  …\n\n  let group = draggable(new Group());\n\n  // draggable(group,false); draggable(group,{destroy,true}) 取消注册drag\n\n  dropabble(group) //注册drop事件\n\n  // dropabble(group,false) ;dropabble(group,{destroy:true}) 取消注册drop\n\n  group.on('drag', (evt) =\u003e {\n    console.log('drag')\n  });\n\n  group.on('drop', (evt) =\u003e {\n    console.log('drop')\n  });\n\n  group.on('dragenter', (evt) =\u003e {\n    console.log('dragenter')\n  });\n\n  group.on('dragleave', (evt) =\u003e {\n    console.log('dragleave')\n  });\n\n  group.on('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.on('dragstart',function(event){\n    console.log('dragstart');\n  });\n\n  sprite.on('drag',function(event){\n    console.log('drag');\n  });\n\n  sprite.on('dragend',function(event){\n    console.log('dragend');\n  });\n\n\n  //取消元素拖动\n  draggable(sprite,false);\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\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fsprite-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-draggable/lists"}