このレッスンでは drag and dropの処理における マウスポインターとオブジェクトとの 位置調整についてご説明します これはまだ位置調整をしていない場合です ドラッグをします そしてマウスボタンを離します 特に問題はないように見えますね けれどこの端っこの所 マウスボタンを押しました そして動かすといきなりインスタンスの真ん中に マウスポインタが来てしまいます というのはこのインスタンスの基準点 原点というのは真ん中になっています マウスポインタを動かしたときに そのマウスポインタの位置と インスタンスの基準点が一致するように 設定してあるから こうなってしまうんですね それを普通はどうなってるのが 自然かといいますと もう1つ作ってあります こちらは端っこをドラッグしても ドラッグし始めた位置が動きません 真ん中にずれてくることがないんですね この位置調整についてご説明します このDreamweaverで開いたhtmlドキュメントは まだ位置調整がしていない場合の スクリプトが書いてあります では位置調整をするための変数を設けましょう offsetとします そしてXY座標両方とも収めたいので こちらはpointobjectで作ることにしましょう createjs.Point このPointというのは X座標Y座標をプロパティとして持ちます ではずれをどこで判断するか 調べるかというと インスタンスをクリックしたときですね マウスダウンのイベントリスナー スタートドラッグです この中で今の変数に ずれを収めることにしましょう offsetのX これがインスタンスの座標 インスタンスはmyshapeとなっていますので これの まずはX座標ですね コピーをしてX座標と それからイベントオブジェクトから調べた マウスポインターのX座標 こちら同じ名前になっていますので コピーを使ってしまいます コピーをここに持ってきます これでX座標のほうのずれがわかります offsetという変数に入りました これはYについても同じことを書きますので コピーをして使ってしまいましょう コピーをして そしてペーストです XをYに書き換えます これでインスタンスと マウスポインターの座標のずれが offsetという変数に入りました それをどこで使うかというと このドラッグをしているときですね ドラッグをしているときの処理 マウスボタンを押したまま動かしたら このドラッグというリスナー関数を 実行するわけですが ここは単純に マウスポインターの座標になっています ここに対して今覚えておいたoffsetですね X座標それからY座標も同様に ずれを加えて維持することにします では保存して確認してみましょう ブラウザでプレビューします マウスボタンをこの端っこの所で押しました 動かすとちゃんと位置がキープされます このようにしてインスタンスと マウスポインタの座標のずれを 保持したまま動かす drag and dropを完成させることができました このレッスンではdrag and dropをする時 マウスポインタとインスタンスの位置のずれ それを保持したまま動かす という方法についてご紹介しました そのずれを保持する変数は ポイントインスタンスで XY座標を持つオブジェクトで作りました そしてマウスボタンを押したとき ドラッグがスタートするリスナー関数の中で そのずれをマウスポインタとインスタンスの XY座標のずれをoffsetという変数にいれ 実際に動かすとき ドラッグをするときですね このリスナー関数のなかで マウスポインターのXY座標に そのずれを補正することで 位置をキープすることができたということです