jQuery 要素をドラッグ&ドロップして位置を取得したい

前提・実現したいこと

要素をドラッグし、ドロップエリア内でドロップしたときの座標を取得・表示したいです。
このときの位置は画面の端からのものではなく、ドロップエリアを親要素からの位置をposition()を用いて取得します。
一度エリア内でドロップした後でも、エリア内外自由に動かしたいです。

発生している問題・エラーメッセージ

親要素（drop_area）からの位置をposition()を使って取得したいのですが、
offset()のように画面の端からの位置しか取得できません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5<title>Draggable / Droppable</title>
6<link rel="stylesheet" type="text/css" href="./css/style.css">
7<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
8<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
9<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
10
11<script type="text/javascript">
12$(function() {
13// 要素をドラッグ可能にする
14$(".item").draggable({
15
16  // ドラッグした要素の元の位置を検索
17  start: function(event, ui) {
18    // 要素のドラッグ開始位置を表示する
19    var startPos = $(this).position();
20    $("div#start").text("START：\nX軸："+ startPos.left + "\nY軸：" + startPos.top);
21  },
22
23  // 要素がドロップされた位置を見つける
24  stop: function(event, ui) {
25    // ドロップした位置を表示する
26    var stopPos = $(this).position();
27    $("div#stop").text("STOP：\nX軸："+ stopPos.left + "\nY軸：" + stopPos.top);
28  }
29});
30});
31</script>
32
33</head>
34<body>
35<div id="jquery-ui-draggable">
36  <div id="item1" class="item">A</div>
37  <hr />
38  <span id="zahyou"></span>
39  <div class="drop_area"></div>
40</div>
41
42<div class="result">
43<div id="start">ドラッグの開始を待っています...</div>
44<div id="stop">ドロップを待っています...</div>
45</div>
46</body>
47</html>

試したこと

CSS
1.item {
2  width: 100px;
3  height: 100px;
4  margin: 40px;
5  border: solid 1px #333;
6  float:left;
7}
8
9#item1 { background-color: #f2ffe5; }
10
11.drop_area {
12  width: 800px;
13  height: 400px;
14  margin: 40px;
15  border: solid 1px #333;
16}
17
18// ここでドロップエリアにpositionを設定しても反映されない。
19// このCSSを外すと、親要素からの位置情報の取得以外は理想の動きになる。
20.drop_area {
21  position: relative;
22  top: 0;
23  left 0;
24}
25
26.result { margin: 40px; }
27
28hr { clear: both; }

補足情報（FW/ツールのバージョンなど）

なかなか実現できず、こちらで質問させていただきました。
アドバイスを頂けますと幸いです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

全体の要素の位置を計算しながらじゃないと厳しいかもですね^^;
具体に回答するにはなかなか骨が折れそうです。。。

例えばdrop_area内のtop位置を求めるなら、
(画面上部から要素Aまでの位置 - 画面上部からdrop_areaまでの位置)
みたいな感じで計算すると、drop_area内のpositionが出せるなと思いました。
文字の出力条件は上記の計算だとデフォルト位置はマイナスになるはずなので、0以上になったタイミングで出せば良いと思います。

上位置や左位置は簡単に出せそうですが、右や下は要素の幅や高さも計算に含めないといけないので大変そう。。。^^;

投稿2021/06/11 21:15

編集2021/06/11 21:19