ドラッグするオブジェクトとマウスポインタの位置を調整する

字幕

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