html5の drag&drop APIを使ったWEBアプリを作成しようとしています。

ページはこちらになります。

http://www.puzzledeanatomy.net/%E3%82%A2%E3%83%97%E3%83%AA%E3%83%86%E3%82%B9%E3%83%88/

下のカラータイルをドラッグエリアに配置したいのですが
スクロールして表示する下の部分では配置できず、別の所に配置されてしまいます。
※ウィンドウをスクロールしない範囲でなら自由に配置可能です。

そこで質問なのですが

①この動作は仕様でしょうか?仕様でないのであれば何か足りない設定があるのでしょうか?
②仕様であれば同じ動作をさせるために他に方法があるのでしょうか?

html初心者質問の内容に無礼な箇所がある場合申し訳ございません。
どうぞご教授の程よろしくお願い致します。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/01 23:43:40
  • 終了:2013/09/02 19:59:02

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922013/09/02 01:29:54

ポイント300pt

evt.clientXでスクロール位置とは関係ないブラウザ上で表示されている位置を取得していて、
次に #droparea 内でのposition:absoluteで(祖先にposition:relativeがいないから)bodyからの絶対位置に配置されるからかな?
適当ですがこうすればそれっぽくみえました。

target.style.left = evt.clientX+document.documentElement.scrollLeft-64+'px';
target.style.top = evt.clientY+document.documentElement.scrollTop-64+'px';

参考 JavaScript メモ / チップス イベント座標とイベントエレメント座標 ARTEMIS


質問文にあるリンク先ページで参考にしたであろうサイトでは、ドラッグする要素とドロップ先がスクロールしない位置にあるため、スクロールが考慮されていません。
HTML5 Drag and dropを実装してみよう | Dress Cording



Draggable | jQuery UI
こっち使ったほうが簡単でいいと思います。

id:hossiiii

早速のご回答ありがとうございます。
ご教授頂いたおすすめのサイトの方がシンプルで
自分の実現したい事が簡単にできそうです。

また配置するだけでなく、drop時に配置した座標から
あたり判定を出すなどの処理も行いたいのですが可能なようですね。

非常に助かりました。ありがとうございます。

2013/09/02 12:36:34

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません