javascript轻量级库createjs使用Easel实现拖拽效果

我就把我学习Createjs的一些心得体会向大家分享下：
一.什么是CreateJS?
createjs是一个轻量级的javascript库，是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，利用createjs可以构建出许多有趣的动画游戏。例如围住神经猫，看你有多色等Html5游戏。
二.CreateJS有哪几款工具？
createjs里面共有四大引擎:

EaselJS:主要用于动画、向量及位图的绘制。提供支持移动设备触控的一系列方法（click、mousedown、pressup、pressmove分别为鼠标点击、按下、松开以及移动的事件,不过在之前要加上createjs.Touch.enable（<舞台对象>））。
TweenJS:是一个制作补间动画的引擎，可生成一种连续变化的效果。（用过flash的童鞋应该知道什么是补间动画哈）
SoundJS:是一个音频播放的引擎，可根据浏览器兼容性及性能选择音频格式播放，可随时加载和卸载。
PreloadJS:是一个资源预加载的引擎，还可以指定加载顺序及按优先级分组加载资源。

三.如何利用Easel制作一个简单的拖拽？
那么假如现在需要用EaselJs实现可任意拖拽一张图片，并通过单击该图片使图片处于选中或未选中状态，选中状态即为可拖拽状态，未选中状态即为不可拖拽状态。且最多有一张图片可以处于拖拽状态。那么如何利用EaselJs实现这个需求且支持移动端设备呢？废话不多说，上源码。
HTML代码：

<html><head><meta charset="utf-8"><script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script><script type="text/javascript">function Init（） {var canvas = document.getElementById（"dragCanvas"）;canvas.width = 600; //定义画布大小canvas.height = 400;var stage = new createjs.Stage（canvas）;createjs.Touch.enable（stage）; //允许设备触控var selectBool = []; //控制状态drawImgs（）;stage.update（）;function drawImgs（） {var oX = 0,oY = 0;var fzmx, fzmy, sx, sy; //辅助变量for （var i = 0; i < 4; i++） {var randomColor = Math.floor（Math.random（） * 16777215）.toString（16）;var con = new createjs.Container（）;var bitmap = new createjs.Bitmap（i + ".jpg"）;selectBool[i] = false;con.x = oX;con.y = oY;oX += 125;con.addChild（bitmap）;con.addEventListener（"mousedown", function （event） {var Mindex = stage.getChildIndex（event.target.parent）;sx = event.stageX;sy = event.stageY;fzmx = event.stageX - event.target.parent.x;fzmy = event.stageY - event.target.parent.y;if （selectBool[Mindex]） {event.target.parent.addEventListener（"pressmove", pressMove, false）;} else {event.target.parent.removeEventListener（"pressmove", pressMove, false）;}stage.update（）;}）;//添加鼠标"松开"事件con.addEventListener（"pressup", function （event） {var Pindex = stage.getChildIndex（event.target.parent）;if （Math.abs（event.stageX - sx） < 3 && Math.abs（event.stageY - sy） < 3） {selectBool[Pindex] = ！selectBool[Pindex];shadowUr（selectBool[Pindex], event.target.parent, randomColor）;}stage.update（）;}）;//切换状态方法function shadowUr（bool, con, randomColor） {if （bool） {con.shadow = new createjs.Shadow（"#" + randomColor, 0, 0, 10）;var fIndex = con.parent.getChildIndex（con）;for （var i = 0; i < con.parent.numChildren; i++） {if （i == fIndex）continue;con.parent.getChildAt（i）.shadow = null;selectBool[i] = false;}} elsecon.shadow = null;}//图片拖动function pressMove（event） {var self = event.target.parent;if （event.stageX - fzmx < 0）self.x = 0;else if （event.stageX - fzmx + self.getBounds（）.width > stage.canvas.width）self.x = stage.canvas.width - self.getBounds（）.width;elseself.x = event.stageX - fzmx;if （event.stageY - fzmy < 0）self.y = 0;else if （event.stageY - fzmy + self.getBounds（）.height > stage.canvas.height）self.y = stage.canvas.height - self.getBounds（）.height;elseself.y = event.stageY - fzmy;stage.update（）;}stage.addChild（con）;}}}</script></head><body onload="Init（）;"><canvas id="dragCanvas" style="border:#333 1px solid"></canvas></body></html>

由于浏览器的同源策略，需要开一个本地服务器，否则无法正常加载。好了，这就是上述所要求的图片拖拽效果啦