0.7.02013年9月25日にCreateJSの新バージョンがリリースされました。EaselJSは0.7.0になります。イベントモデルが大きく変わりました。イベントがより扱いやすくなり、一貫した仕組みになります(「EaselJS次期バージョンのイベントモデル改訂」参照)。前のバージョンとスクリプティングが変わった例として、インスタンスのドラッグ&ドロップを採上げます。ドラッグ&ドロップをマウスイベントでどう扱うかインスタンスのドラッグ&ドロップは、3つのイベントを組合わせて行います。(1)インスタンスのうえでマウスボタンを押したとき、ドラッグを始めます。(2)マウスのボタンをプレスしたまま動かすと、インスタンスの位置をポインタに追随させます。(3)マウスボタンを放したら、ドラッグが終わります。これら3つのイベントは、つぎの表001のとおりDisplayObjectクラスに定められています。インスタンス上でマウスボタンが押された。インスタンス上でマウスボタンが押されたまま、ポインタが動かされた。インスタンス上で押されたマウスボタンが放された。0.6.1では、上述のマウス操作で(2)マウスボタンを押したまま動かし、(3)マウスボタンを放すイベントはMouseEventクラスが扱いました。これらのイベントを表示リストのインスタンスすべてにゆき渡らせると、負荷が大きくなり過ぎます。そのため、マウスボタンが押されたインスタンスに対するマウス操作だけを見るようにしたのです。いえ、このままではマウスイベントを扱うクラスがふたつに分かれて整合性に欠けます。0.7.0ではイベントをDisplayObjectクラスにまとめる替わりに、インスタンス上でマウスボタンが押されたことを前提としたのです(「EaselJSの次期バージョンにおけるイベントのバブリングとマウスイベント」参照)。DisplayObject.pressupDisplayObjectインスタンスのマウスイベントにリスナーを加えるには、EventDispatcher.addEventListener()メソッドを用います。第1引数はイベントの名前(種類)、第2引数がイベントで呼出すリスナー関数です。イベントの処理が済んで要らなくなったリスナーは、EventDispatcher.removeEventListener()メソッドで除きます。引数はEventDispatcher.addEventListener()メソッドと揃えます。ステージにインスタンスを置くドラッグ&ドロップの処理の前に、ドラッグするインスタンスをステージにつくります。矩形のShapeインスタンスを真ん中に置きましょう(図001)。HTMLドキュメントのbody要素にはcanvas要素を加え、JavaScriptで扱えるようにid属性("myCanvas")も定めておきます。コードは後で全体を掲げます(コード001)。行番号もそのコードにもとづきます。height="180"></canvas>図001■ステージに置かれたShapeインスタンスShapeインスタンスをつくって返す関数(createShape())は新たに定めました(第27〜33行目)。引数にはxy座標値を与えます。ShapeインスタンスのShape.graphicsプロパティを別の関数(drawRectangle())に渡して、矩形を描いています(第34〜39行目)。してつくったShapeインスタンスをStageオブジェクトの表示リストに加えます(第6および第8行目)。ドラッグ&ドロップのスクリプトを組立てるでは、本題のドラッグ&ドロップです。第1に、インスタンスのDisplayObject.mousedownイベントにリスナー(startDrag())を加えます(第10行目)。リスナー関数は、引数のオブジェクト(eventObject)のEvent.targetプロパティからマウス操作をしたインスタンス(instance)が得られますので、そのDisplayObject.pressmoveイベントにドラッグのための関数(drag())をリスナーとして加えます(第12〜13行目)。第2に、インスタンスをドラッグするリスナー関数(drag())は、引数のオブジェクト(eventObject)のMouseEvent.stageXおよびMouseEvent.stageYプロパティでマウスポインタのステージ上の座標を調べて、インスタンス(instance)のxy座標に与えます(第17〜19行目)。これで、マウスポインタの位置に合わせてインスタンスが動きます。eventObject.stageY;stage.update();}これでマウスボタンを放せば、ドラッグは止まります。DisplayObject.pressmoveイベントのリスナー(drag())がまだ残っています。このままでは、マウスイベントを扱ううえで意図しない問題が起こるかもしれません。そこで第3に、要らなくなったマウスイベントのリスナーは除きます。その処理は、DisplayObject.pressupイベントのリスナー(stopDrag())として、マウスボタンを押したときのリスナー関数(startDrag())で加えます(第14行目)。マウスボタンを放したときのリスナーは、DisplayObject.pressmoveとDisplayObject.pressupイベントのリスナーをそれぞれインスタンスから除きます(第23〜25行目)。stopDrag);}インスタンスのごく基本的なドラッグ&ドロップの処理が、これで組立てられます(図002)。script要素はbody要素に加えました。body要素の全体は、以下のコード001のとおりです。jsdo.itにコードを掲げ、そのリンクを添えましたので、ご参照ください。