回答編集履歴

3

追記

2020/05/11 19:58

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
@@ -36,6 +36,18 @@
36
36
 
37
37
  ----
38
38
 
39
+ 追記)コメントを受けて
40
+
41
+ 状態の変化に応じてイベントが発火していますので、実際の操作と紐付けて考えます。
42
+
43
+ * [マウスイベントを可視化する](https://takamints.hatenablog.jp/entry/mouseenter-vs-mouseover) ... 実際の操作に対応するイベント発生状況が確認できます。
44
+
45
+
46
+
47
+
48
+
49
+ ----
50
+
39
51
  > ドラッグドロップの練習として
40
52
 
41
53
 

2

追記2

2020/05/11 19:58

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
@@ -7,6 +7,10 @@
7
7
  ``classList.add()`` と、``table.addEventListener('mouseup',mup,false);`` は、 mousedown に移動しても動作するのではないでしょうか。
8
8
 
9
9
  特に、後者の「イベントリスナのアタッチ」が連続的に行われる点は絶対に修正すべきです。
10
+
11
+ (際限のない多重登録が影響し、mouseup時に全リスナ実行(ラグ発生)するので、「置き去り」現象になっています)
12
+
13
+
10
14
 
11
15
 
12
16
 

1

追記

2020/05/11 02:29

投稿

AkitoshiManabe
AkitoshiManabe

スコア5432

test CHANGED
@@ -27,3 +27,19 @@
27
27
 
28
28
 
29
29
  ※ window 表示の PC用ブラウザなどは、押下したままウィンドウ枠の外でマウスボタンの開放なども発生しうるので focus / blur など、他のイベントを補助的に利用するなどして対策します。
30
+
31
+
32
+
33
+ ----
34
+
35
+ > ドラッグドロップの練習として
36
+
37
+
38
+
39
+ マウスイベントだけで実装する以外に、[MDN:ドラッグ操作](https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations)でもドラッグ&ドロップを学習できると思います
40
+
41
+ (ページ左のメニューにある「イベント」セクションで案内されている各イベントも要チェック)。
42
+
43
+
44
+
45
+ [DragEvent](https://developer.mozilla.org/ja/docs/Web/API/DragEvent) は MouseEvent を継承しているので、ご質問のようなMouse操作と同様に座標取得ができます。