在js中如何实现与脱拽,移动,还有吸附功能

这里的碎片是一个精灵,对每一个精灵都可以进行拖动,还有点击,移动的的操作,

//小碎片的点击
_addEvent:function (){
    var that =this;
    var listener =cc.EventListener.create({
        event:cc.EventListener.TOUCH_ONE_BY_ONE,
        swallowTouches:true,
        onTouchBegan:function(touch,event){
            if(that.reachTarget)return false;//到大位置不能移动
            var target =event.getCurrentTarget();
            var locationInNode =target.convertToNodeSpace(touch.getLocation());
            var s=target.getContentSize();
            var rect =cc.rect(0,0, s.width, s.height);
            if(cc.rectContainsPoint(rect,locationInNode)){
                target.setZOrder(10);//更改Z周值,使得点击最前面
                return true;
            }
            return false;
        },
 
      //小碎片的移动功能
        onTouchMoved:function(touch,event){
            var target = event.getCurrentTarget();
            var delta =touch.getDelta();
            target.x +=delta.x;
            target.y +=delta.y;
        },
 
//小碎片的吸附功能,判断距离,然后进行吸附。
        ouTouchEnded:function(touch,event){
            var target = event.getCurrentTarget();
            if(cc.pDistance(target.getPosition(),that._targetPoint)<50){
                target.setPosition(that._targetPoint);
                that.reachTarget =true;
                that._callHandler();
            }
        }
    });
    cc.eventManager.addListener(listener,this);

}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值