以前、ドラッグ移動のサンプルコードを掲載しました。
その際に次のようなことを言っていまして、今回の記事はその補足編となります。
ピクチャの「位置」は「中央」にしておくと、いちばん見栄えのいい動きをします。
あんまり速く動かすとすっぽ抜けたりしますが……
目次
なぜドラッグの位置を「中央」とおすすめしたのか、なぜ「すっぽ抜け」が起こるのか
まずはサンプルコード
以前（上の記事）で紹介したドラッグのサンプルを改めて作成してみましょう。
こんな感じで、よさげに動いてくれそうです。
ところが……
動かしてみてわかる”処理のクセ”
上のコードでどうなるでしょうか。
ドラッグしたい画像として赤い丸（ID100の<CIRCLE>）を用意してみました。
マウスカーソルの位置は小さな水色の点で示しています。
クリックしただけ（まだドラッグ移動がはじまっていない）という状態から、ピクチャは上の図のようにちょっとだけ動いてしまいます。
マウスカーソルの位置を基点として都度、再描画されるため、このようなことになります。
しかも、ピクチャの描画位置が「左上」なんかだと、カーソル位置に画像の「カド」が動いてしまうので見かけの挙動はかなりバグっぽい。
1f前のカーソル位置を記憶して、カーソルが動いた分だけ画像を動かす……という手もありますが、それもそれで手間だし、ごちゃごちゃしています。ウディタはゲームの画面外のカーソル位置をうまく拾えないので（下のリンクを参照）、バグらそうと思ってガチャガチャやると簡単に「すっぽ抜け」も起こるのです。
すっぽ抜けを予防した滑らかなドラッグ設定
どうすればよいのでしょうか。
答えは、クリックした瞬間のマウスカーソルの位置と、画像の表示位置との「差」を記憶しておくことです。
上のサンプルコードを次のように修正します。
紫のラインで囲ってある部分が変更点です。
つまり、最初のやり方で起こる「クリックしただけでズレてしまう量」をあらかじめ取得して、打ち消すように足し引きしているわけですね。
あとは最初のドラッグ講座で行っているように「カーソルが画面外へ出ないようにする」コモンを置くことで、快適なドラッグが実現できます。
