Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

let sprite can draggable,让sprite对象拥有draggable的能力

NotificationsYou must be signed in to change notification settings

spritejs/sprite-draggable

Repository files navigation

let sprite can draggable,让sprite对象拥有draggable的能力

运行demo

npm installnpm start

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

安装sprite-draggable依赖

  npm install sprite-draggable --save

作为spritejs插件使用

// draggable与droppable方法注册到BaseSprite上import{install}from'sprite-draggable'spritejs.use(install);letgroup=newGroup();group.draggable();// group.draggable(false); group.draggable({destroy,true}) 取消注册draggroup.dropabble()//注册drop事件// group.droppable(false) ;group.droppable({destroy:true}) 取消注册dropgroup.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')});letsprite=newSprite();//表示在 [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);

作为方法使用

import{draggable,droppable}from'sprite-draggable'letgroup=draggable(newGroup());// draggable(group,false); draggable(group,{destroy,true}) 取消注册dragdropabble(group)//注册drop事件// dropabble(group,false) ;dropabble(group,{destroy:true}) 取消注册dropgroup.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')});letsprite=draggable(newSprite());//表示在 [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对象上

About

let sprite can draggable,让sprite对象拥有draggable的能力

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors2

  •  
  •  

[8]ページ先頭

©2009-2025 Movatter.jp