hossiiii回答ポイント 300pt

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

Cherenkov2013/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
こっち使ったほうが簡単でいいと思います。
スター
- 1件のコメントを見る
- hossiiii 2013/09/02 12:36:34
  
  早速のご回答ありがとうございます。
  ご教授頂いたおすすめのサイトの方がシンプルで
  自分の実現したい事が簡単にできそうです。
  
  また配置するだけでなく、drop時に配置した座標から
  あたり判定を出すなどの処理も行いたいのですが可能なようですね。
  
  非常に助かりました。ありがとうございます。
  
  スター