CocosCreator学习5：实现物体拖动

今天来学习一下如何实现物体拖动。
通过CocosCreator内置的cc.Node.EventType.MOUSE_MOVE鼠标事件实现，其返回参数为鼠标的坐标值delta.x，delta.y。将节点的位置坐标x、y等于鼠标事件返回的坐标值delta.x，delta.y即可实现物体的拖动。脚本代码如下：

cc.Class({
    extends: cc.Component,

    properties: {

    },

    // use this for initialization
    onLoad: function () {

        this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
            this.opacity = 255;
            var delta = event.touch.getDelta();
            this.x += delta.x;
            this.y += delta.y;
        }, this.node);
    },

    // called every frame
    update: function (dt) {

    },
});

为了改善体验，增加一个反馈效果，可以设置鼠标选中物体时，物体变透明，释放时物体还原。修改onLoad:function方法，其实应该设置为鼠标点击时改变透明度，这里可以进行简化，在物体拖动时，透明度为100，结束时透明度恢复255，效果一样。代码如下：

    onLoad: function () {

        this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
            this.opacity = 100;
            var delta = event.touch.getDelta();
            this.x += delta.x;
            this.y += delta.y;
        }, this.node);
        this.node.on(cc.Node.EventType.TOUCH_END, function () {
            this.opacity = 255;
        }, this.node);
    },

接下来只需要将脚本增添到可以拖动的物体节点上即可。