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);    },

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