https://github.com/spritejs/next-draggable
let @spritejs/next spritejs v3 can draggable，让 spritejs v3 对象拥有 draggable 的能力
https://github.com/spritejs/next-draggable
Last synced: 9 months ago
JSON representation
let @spritejs/next spritejs v3 can draggable，让 spritejs v3 对象拥有 draggable 的能力
- Host: GitHub
- URL: https://github.com/spritejs/next-draggable
- Owner: spritejs
- Created: 2019-11-26T09:21:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:10:05.000Z (about 3 years ago)
- Last Synced: 2025-04-23T00:42:29.058Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 813 KB
- Stars: 4
- Watchers: 6
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-draggable
let @spritejs/next can draggable，让 sprite 对象拥有 draggable 的能力
### 运行 demo
```
npm install
npm start
```
通过浏览器访问可以查看具体 demo
### 安装 next-draggable 依赖
```
npm install next-draggable --save
```
### 作为 spritejs 插件使用
```javascript
// draggable与droppable方法注册到Node上
import { install } from 'next-draggable'
install(spritejs);
…
let group = new Group();
group.draggable();
// group.draggable(false); group.draggable({destroy:true}) 取消注册drag
group.droppable()//注册drop事件
// group.droppable(false) ;group.droppable({destroy:true}) 取消注册drop
group.addEventListener('drag', (evt) => {
console.log('drag')
});
group.addEventListener('drop', (evt) => {
console.log('drop')
});
group.addEventListener('dragenter', (evt) => {
console.log('dragenter')
});
group.addEventListener('dragleave', (evt) => {
console.log('dragleave')
});
group.addEventListener('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]
//sprite.draggable({dragRect:[0,0]});
/**拖动过程中，有三个事件 dragstart、drag、dragend**/
sprite.addEventListener('dragstart',function(event){
console.log('dragstart');
});
sprite.addEventListener('drag',function(event){
console.log('drag');
});
sprite.addEventListener('dragend',function(event){
console.log('dragend');
});
//取消元素拖动
sprite.draggable(false);
```
### 作为方法使用
```javascript
import { draggable, droppable } from 'next-draggable'
…
let group = draggable(new Group());
// draggable(group,false); draggable(group,{destroy,true}) 取消注册drag
droppable(group) //注册drop事件
// droppable(group,false) ;droppable(group,{destroy:true}) 取消注册drop
group.addEventListener('drag', (evt) => {
console.log('drag')
});
group.addEventListener('drop', (evt) => {
console.log('drop')
});
group.addEventListener('dragenter', (evt) => {
console.log('dragenter')
});
group.addEventListener('dragleave', (evt) => {
console.log('dragleave')
});
group.addEventListener('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.addEventListener('dragstart',function(event){
console.log('dragstart');
});
sprite.addEventListener('drag',function(event){
console.log('drag');
});
sprite.addEventListener('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 对象上 | |