質問編集履歴
2
一部修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
|
|
73
73
|
|
|
74
74
|
|
|
75
|
-
全体ソースコード
|
|
75
|
+
### 全体ソースコード
|
|
76
76
|
|
|
77
77
|
[https://codepen.io/mio-rei/pen/JjEVMNm](https://codepen.io/mio-rei/pen/JjEVMNm)
|
|
78
78
|
|
1
一部抜けていた部分あり
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
###
|
|
1
|
+
### 流れ：
|
|
2
2
|
|
|
3
|
-
・要素の上で右クリック
|
|
3
|
+
・要素の上で右クリックしメニュー表示
|
|
4
4
|
|
|
5
5
|
・メニューで画像をクリック
|
|
6
6
|
|
|
@@ -14,19 +14,67 @@
|
|
|
14
14
|
|
|
15
15
|
### 問題点：
|
|
16
16
|
|
|
17
|
-
・クリック
|
|
17
|
+
・ファイル選択→要素をクリックで画像設置。再度クリックするとまた画像が移動する(クリックするたびに設置した画像が移動する）
|
|
18
|
-
|
|
19
|
-
一度クリックして画像を設置したらクリックイベントで移動は行わない様にしたい。
|
|
20
18
|
|
|
21
19
|
|
|
22
20
|
|
|
23
|
-
・
|
|
21
|
+
・メニュー項目「画像」を選択する前から要素をクリックするとimg要素の枠線が表示されてしまう。
|
|
24
22
|
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
・画像を一枚だけしか表示できない。
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### やりたいこと：
|
|
30
|
+
|
|
31
|
+
・一度クリックして画像を設置したら、クリックイベントで画像の移動は行わない様にしたい(一度クリックした時点で設置完了とする)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
・画像が複数設置できるようにしたい(ファイル選択→画像設置の流れで、画像を複数設置できるようにしたい)
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
・メニュー項目の「画像」を選択してからでないと画像設置イベントが起きない様にしたい（上記問題点のimg要素が表示されるのを改善したい)
|
|
40
|
+
|
|
41
|
+
下記ソースコードだと、
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
picture.onclick = () => {
|
|
46
|
+
|
|
47
|
+
select.click();
|
|
48
|
+
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
のイベントが起きるまでは、
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
element.onclick = (e) => {
|
|
56
|
+
|
|
57
|
+
element.appendChild(image2);
|
|
58
|
+
|
|
59
|
+
image2.style.position = 'absolute';
|
|
60
|
+
|
|
61
|
+
..................
|
|
62
|
+
|
|
63
|
+
}
|
|
64
|
+
|
|
25
|
-
|
|
65
|
+
のイベントが起きない様にしたい。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
ご教示宜しくお願い致します。
|
|
26
70
|
|
|
27
71
|
|
|
28
72
|
|
|
29
73
|
|
|
74
|
+
|
|
75
|
+
全体ソースコード
|
|
76
|
+
|
|
77
|
+
[https://codepen.io/mio-rei/pen/JjEVMNm](https://codepen.io/mio-rei/pen/JjEVMNm)
|
|
30
78
|
|
|
31
79
|
|
|
32
80
|
|
|
@@ -60,8 +108,6 @@
|
|
|
60
108
|
|
|
61
109
|
reader.readAsDataURL(e.target.files[0]);
|
|
62
110
|
|
|
63
|
-
console.log(reader);
|
|
64
|
-
|
|
65
111
|
}
|
|
66
112
|
|
|
67
113
|
|
|
@@ -82,8 +128,6 @@
|
|
|
82
128
|
|
|
83
129
|
image2.setAttribute('src', reader.result);
|
|
84
130
|
|
|
85
|
-
console.log(reader);
|
|
86
|
-
|
|
87
131
|
}
|
|
88
132
|
|
|
89
133
|
```
|