人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: hossiiii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●300ポイント ベストアンサー

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
こっち使ったほうが簡単でいいと思います。


hossiiiiさんのコメント
早速のご回答ありがとうございます。 ご教授頂いたおすすめのサイトの方がシンプルで 自分の実現したい事が簡単にできそうです。 また配置するだけでなく、drop時に配置した座標から あたり判定を出すなどの処理も行いたいのですが可能なようですね。 非常に助かりました。ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ