質問編集履歴

3

2021/02/04 00:32

投稿

pecchan
pecchan

スコア591

test CHANGED
File without changes
test CHANGED
@@ -10,13 +10,9 @@
10
10
 
11
11
  jQuery初心者です。
12
12
 
13
- ラッグ&ドロップで画像をアップロードするため、ドロップイベントを補足したいのですが反応しません。
13
+ ドロップイベントを補足したいのですが反応しません。
14
14
 
15
- 別タブで画像が開いてしまいます。
15
+ ドラッグ&ドロップすると別タブが開いてしまいます。
16
-
17
-
18
-
19
- まずはラベル内でドロップしたらalertを出力したいです。
20
16
 
21
17
 
22
18
 

2

内容をシンプルに変更

2021/02/04 00:32

投稿

pecchan
pecchan

スコア591

test CHANGED
@@ -1 +1 @@
1
- ドロップイベント反応しない
1
+ クリックイベントは反応するのに、ドロップイベント反応しない
test CHANGED
@@ -34,23 +34,11 @@
34
34
 
35
35
  ```html
36
36
 
37
- <label class="upload-img__label" >
37
+ <div class="hoge" style="width:500px; height:500px; background:red;">
38
38
 
39
- <div class="upload-img__label__inner">
39
+ </div>
40
40
 
41
- <input class="upload-img__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;">
42
41
 
43
- <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" >
44
-
45
- <path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path>
46
-
47
- </svg>
48
-
49
- <p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p>
50
-
51
- </div>
52
-
53
- </label>
54
42
 
55
43
  ```
56
44
 
@@ -64,21 +52,23 @@
64
52
 
65
53
  alert("これは出力される");
66
54
 
67
- $('.upload-img__label').on('drop', function (event) {
55
+ $('.hoge').on('drop', function (event) {
68
56
 
69
57
 
70
58
 
71
59
  alert("これは出力されない");
72
60
 
73
- event.stopPropagation();
61
+
74
-
75
- event.preventDefault();
76
62
 
77
63
 
78
64
 
79
-
65
+ });
80
66
 
67
+
68
+
81
-
69
+ $('.hoge').on('click', function (event) {
70
+
71
+ alert("click");
82
72
 
83
73
  });
84
74
 
@@ -90,17 +80,7 @@
90
80
 
91
81
  ### 試したこと
92
82
 
93
- セレクタを、
94
-
95
- .upload-img__labelから、
96
-
97
- upload-img__label__innerやupload-img__inputに変えても同じでした。
98
-
99
-
100
-
101
-
102
-
103
- dropをclickに変えると、clickイベントは反応しました。
83
+ clickイベントは反応しました。
104
84
 
105
85
  dropだけ反応しません。。。
106
86
 

1

clickは反応しました

2021/02/04 00:32

投稿

pecchan
pecchan

スコア591

test CHANGED
File without changes
test CHANGED
@@ -98,6 +98,16 @@
98
98
 
99
99
 
100
100
 
101
+
102
+
103
+ dropをclickに変えると、clickイベントは反応しました。
104
+
105
+ dropだけ反応しません。。。
106
+
107
+
108
+
109
+
110
+
101
111
  先輩方アドバイスいただけないでしょうか?
102
112
 
103
113
  宜しくお願いします。