質問編集履歴
2
必要な情報の追加 タグの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,25 +1,31 @@
|
|
|
1
|
-
座標
|
|
1
|
+
要素１をクリックした時に座標１にクリックした時の座標を、要素２をクリックした時に座標２にクリックした時の座標という風にしたい。
|
|
2
|
-
|
|
2
|
+
要素はドラッグで動かせるようしていてドロップした時の座標が欲しい。
|
|
3
|
+
今のやり方では要素１の座標しか取り出せていないので解決方法を教えてください。
|
|
3
4
|
|
|
4
|
-
```
|
|
5
|
+
```html
|
|
6
|
+
//要素１
|
|
7
|
+
<div class="drag-and-drop" id="target" style="top:;left:0;background-color:#f48fb1;">正方形</div>
|
|
8
|
+
//要素２
|
|
5
|
-
<div
|
|
9
|
+
<div class="drag-and-drop2" id=target2" style="top:1;left:110px;background-color:#64b5f6;">縦長</div>
|
|
6
|
-
|
|
10
|
+
//要素３
|
|
11
|
+
<div class="drag-and-drop3" id="target3" style="top:1;left:220px;background-color:#ffe082;">横長</div>
|
|
12
|
+
//座標１
|
|
7
13
|
document.getElementById("target").addEventListener('click', function(event) {
|
|
8
14
|
var kimetu = event.pageX ; // 水平の位置座標
|
|
9
15
|
var yaiba = event.pageY ; // 垂直の位置座標
|
|
10
16
|
document.getElementsByName('name')[0].value = kimetu + ":" + yaiba;
|
|
11
17
|
});
|
|
12
|
-
|
|
18
|
+
//座標２
|
|
13
|
-
document.getElementById( "
|
|
19
|
+
document.getElementById( "target2" ).addEventListener('click', function(event) {
|
|
14
20
|
var kuroko = event.pageX ; // 水平の位置座標
|
|
15
21
|
var basuke = event.pageY ; // 垂直の位置座標
|
|
16
|
-
document.getElementsByName('
|
|
22
|
+
document.getElementsByName('name2')[1].value = kuroko + ":" + basuke;
|
|
17
23
|
});
|
|
18
|
-
|
|
24
|
+
//座標３
|
|
19
|
-
document.getElementById( "
|
|
25
|
+
document.getElementById( "target3" ).addEventListener('click', function(event) {
|
|
20
26
|
var saikikusuo = event.pageX ; // 水平の位置座標
|
|
21
27
|
var sainann = event.pageY ; // 垂直の位置座標
|
|
22
|
-
document.getElementsByName('
|
|
28
|
+
document.getElementsByName('name3')[2].value = saikikusuo + ":" + sainann;
|
|
23
29
|
});
|
|
24
30
|
</script>
|
|
25
31
|
|
|
@@ -28,7 +34,7 @@
|
|
|
28
34
|
|
|
29
35
|
<form method="post" action="demo.php" >
|
|
30
36
|
<p>
|
|
31
|
-
座標
|
|
37
|
+
座標１
|
|
32
38
|
<input type="text" value="クリックしてね☆" name="name">
|
|
33
39
|
|
|
34
40
|
</p>
|
|
@@ -36,12 +42,12 @@
|
|
|
36
42
|
|
|
37
43
|
<p>
|
|
38
44
|
座標2
|
|
39
|
-
<input type="text" value="クリックしてね☆" name="
|
|
45
|
+
<input type="text" value="クリックしてね☆" name="name2">
|
|
40
46
|
|
|
41
47
|
</p>
|
|
42
48
|
<p>
|
|
43
49
|
座標3
|
|
44
|
-
<input type="text" value="クリックしてね☆" name="
|
|
50
|
+
<input type="text" value="クリックしてね☆" name="name3">
|
|
45
51
|
|
|
46
52
|
</p>
|
|
47
53
|
<input type="submit" value="submit">
|
1
タグを修正しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|