createjs drag & drop

by Yanan Tian

HTML

<canvas width="400" height="300" id="mineCanvas"></canvas>
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>

JavaScript

var stage = new createjs.Stage("mineCanvas"),
    canvas = stage.canvas,
    CW = canvas.width,
    CH = canvas.height;

var cc, txt, dragCont,
	c = createjs;

stage.mouseMoveOutside = true;

stage.addChild(dragCont = new c.Container())
	.set({x: 100, y: 100});

cc = new c.Shape();
cc.x = 50;
cc.y = 50;
cc.graphics.beginFill('red').drawCircle(0,0,50);

txt = new c.Text('求拖拽', 'bold 30px monospace', '#fff');
txt.x = 50;
txt.y = 50;
txt.textAlign = 'center';
txt.textBaseline = 'middle';

dragCont.addChild(cc, txt);

//子显示对象不监听事件
dragCont.mouseChildren = false;

c.Ticker.timingMode = c.Ticker.RAF_SYNCED;
c.Ticker.setFPS(60);
c.Ticker.on('tick', stage);

dragCont.on('mousedown', function(evt){
  var stageX = evt.stageX,
      stageY = evt.stageY,
      localPos = this.globalToLocal(stageX, stageY);
  dragCont._localPos = localPos;
});
dragCont.on('pressup', function(evt){
  dragCont._localPos = {x: 50, y: 50};
});
dragCont.on('pressmove', function(evt){
	this.x = evt.stageX - this._localPos.x;
  this.y = evt.stageY - this._localPos.y;
});