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

最新推荐文章于 2023-11-09 17:51:25 发布

原创最新推荐文章于 2023-11-09 17:51:25 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种在游戏中实现精灵拖动与吸附功能的方法。通过触摸事件监听，实现了精灵的点击、移动及根据距离判断进行自动吸附的功能。适用于游戏开发中需要精确控制精灵位置的场景。

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

//小碎片的点击
_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);

}