# sprite-draggable

> let sprite can draggable

Latest version **0.1.21** (published 2019-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install sprite-draggable
pnpm add sprite-draggable
yarn add sprite-draggable
bun add sprite-draggable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.21 |
| Published | 2019-12-17 |
| First published | 2018-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 554.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yaotaiyang |
| Maintainers | yaotaiyang |

## Links

- npm: https://www.npmjs.com/package/sprite-draggable
- Homepage: https://github.com/spritejs/sprite-draggable
- Issues: https://github.com/spritejs/sprite-draggable/issues
- npm.io page: https://npm.io/package/sprite-draggable

## Dependencies (1)

- [sprite-math](https://npm.io/package/sprite-math.md) ^1.0.5

## Recent versions

- 0.1.21 (latest) — 2019-12-17
- 0.1.20 — 2019-12-17
- 0.1.19 — 2019-10-28
- 0.1.18 — 2019-10-24
- 0.1.17 — 2019-05-25
- 0.1.16 — 2019-05-08
- 0.1.15 — 2019-04-01
- 0.1.14 — 2019-03-20
- 0.1.13 — 2019-01-17
- 0.0.13 — 2018-12-13
- 0.0.12 — 2018-12-13
- 0.0.11 — 2018-12-13
- 0.0.10 — 2018-12-13
- 0.0.9 — 2018-12-11
- 0.0.8 — 2018-12-11
- … 7 more at https://npm.io/package/sprite-draggable/versions

## README

# sprite-draggable
let sprite can draggable，让sprite对象拥有draggable的能力

### 运行demo

```
npm install

npm start
```
访问 http://localhost:9092 查看具体demo

<image src="./sprite-draggable.jpg" style="width:100%">



### 安装sprite-draggable依赖
``` 
  npm install sprite-draggable --save
```

### 作为spritejs插件使用
```javascript

  // draggable与droppable方法注册到BaseSprite上
  import { install } from 'sprite-draggable'
  spritejs.use(install);
  …

  let group = new Group();
  group.draggable();
  // group.draggable(false); group.draggable({destroy,true}) 取消注册drag

  group.dropabble()//注册drop事件

  // group.droppable(false) ;group.droppable({destroy:true}) 取消注册drop

  group.on('drag', (evt) => {
    console.log('drag')
  });

  group.on('drop', (evt) => {
    console.log('drop')
  });

  group.on('dragenter', (evt) => {
    console.log('dragenter')
  });

  group.on('dragleave', (evt) => {
    console.log('dragleave')
  });

  group.on('dragover', (evt) => {
    console.log('dragover')
  });

  let sprite = new Sprite();
  //表示在 [0,0] 与 [300,300] 这两点矩形之间拖动 [xmin,ymin,xmax,ymax]，不设置表示不控制拖动范围
  sprite.draggable({dragRect:[0,0,300,300]})

  // 取消设置dragRect方法
  //sprite.draggable({dragRect:[0,0,300,300]})

  //表示拖动的范围大于坐标[0,0]
  //sprite.draggable({dragRect:[0,0]});

  /**拖动过程中，有三个事件 dragstart、drag、dragend**/
  sprite.on('dragstart',function(event){
    console.log('dragstart');
  });

  sprite.on('drag',function(event){
    console.log('drag');
  });

  sprite.on('dragend',function(event){
    console.log('dragend');
  });


  //取消元素拖动
  sprite.draggable(false);

```
### 作为方法使用
```javascript

  import { draggable, droppable } from 'sprite-draggable'

  …

  let group = draggable(new Group());

  // draggable(group,false); draggable(group,{destroy,true}) 取消注册drag

  dropabble(group) //注册drop事件

  // dropabble(group,false) ;dropabble(group,{destroy:true}) 取消注册drop

  group.on('drag', (evt) => {
    console.log('drag')
  });

  group.on('drop', (evt) => {
    console.log('drop')
  });

  group.on('dragenter', (evt) => {
    console.log('dragenter')
  });

  group.on('dragleave', (evt) => {
    console.log('dragleave')
  });

  group.on('dragover', (evt) => {
    console.log('dragover')
  });

  let sprite = draggable(new Sprite());

  //表示在 [0,0] 与 [300,300] 这两点矩形之间拖动 [xmin,ymin,xmax,ymax]，不设置表示不控制拖动范围
  draggable(sprite,{dragRect:[0,0,300,300]});
  //draggable(sprite,{dragRect:[]});

  //表示拖动的范围大于坐标[0,0]
  //draggable(sprite,{dragRect:[0,0]});

  /**拖动过程中，有三个事件 dragstart、drag、dragend**/
  sprite.on('dragstart',function(event){
    console.log('dragstart');
  });

  sprite.on('drag',function(event){
    console.log('drag');
  });

  sprite.on('dragend',function(event){
    console.log('dragend');
  });


  //取消元素拖动
  draggable(sprite,false);

```
### 事件列表：

| 事件   |      描述      |  其它 |
|----------|-------------|------|
| dragstart |  开始拖动对象 |  |
| drag |    正在拖动对象   |   |
| dragend | 停止拖动对象 |     |
| dragover | 一个draggable对象在另一个droppable对象上拖动 |     |
| dragenter | 一个draggable对象在进入一个droppable对象上 |   draggable进入droppable判断点为draggable对象最小矩形的中心  |
| dragleave | 一个draggable对象离开一个droppable对象上 |     |
| drop | 一个draggable对象放在一个droppable对象上 |     |

---
_Source: https://npm.io/package/sprite-draggable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._