ページはこちらになります。
http://www.puzzledeanatomy.net/%E3%82%A2%E3%83%97%E3%83%AA%E3%83%86%E3%82%B9%E3%83%88/
下のカラータイルをドラッグエリアに配置したいのですが
スクロールして表示する下の部分では配置できず、別の所に配置されてしまいます。
※ウィンドウをスクロールしない範囲でなら自由に配置可能です。
そこで質問なのですが
①この動作は仕様でしょうか？仕様でないのであれば何か足りない設定があるのでしょうか？
②仕様であれば同じ動作をさせるために他に方法があるのでしょうか？
html初心者質問の内容に無礼な箇所がある場合申し訳ございません。
どうぞご教授の程よろしくお願い致します。
No.1
1504
493
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
こっち使ったほうが簡単でいいと思います。
1
2
18
18
早速のご回答ありがとうございます。
2013/09/02 12:36:34ご教授頂いたおすすめのサイトの方がシンプルで
自分の実現したい事が簡単にできそうです。
また配置するだけでなく、drop時に配置した座標から
あたり判定を出すなどの処理も行いたいのですが可能なようですね。
非常に助かりました。ありがとうございます。