ドラッグドロップでマウスを素早く動かした時対象が置き去りにされるのを改善したい

Question

ドラッグドロップの練習としてコードを書いてみました。
ゆっくりとマウスを動かしているときは実現したい挙動をしてくれるのですが、素早くマウスを動かすとドラッグしたい対象を置き去りにしてしまします。
置き去りにしないようにするにはどうすればいいでしょうか？
わかる方がいればご教授いただければ幸いです。

<table class="box_cover" onMouseDown="return false;" onSelectStart="return false">
  <tr class="row1">
    <td class="r1_low1">
      <div id="box1" class="item">キリン1</div>
    </td>
    <td class="r1_low2">
      <div id="box2" class="item">ライオン1</div>
    </td>
    <td class="r1_low3">
      <div id="box3" class="item">ゾウ1</div>
    </td>
  </tr>
  <tr class="row2">
    <td class="r2_low1">
    </td>
    <td class="r2_low2">
      <div id="box7" class="item">ひよこ1</div>
    </td>
    <td class="r2_low3">
    </td>
  </tr>
  <tr class="row3">
    <td class="r3_low1">
    </td>
    <td class="r3_low2">
      <div id="box8" class="item">ひよこ2</div>
    </td>
    <td class="r3_low3">
    </td>
  </tr>
  <tr class="row4">
    <td class="r4_low1"> 
      <div id="box10" class="item">ゾウ2</div>
    </td>
    <td class="r4_low2">
      <div id="box11" class="item">ライオン2</div>
    </td>
    <td class="r4_low3">
      <div id="box12" class="item">キリン2</div>
    </td>
  </tr>
</table>

let table=document.querySelector('.box_cover');

       function mdown(){
        event.target.classList.add('target');
        table.addEventListener('mousemove',mmove,false);
       }

       function mmove(){
        let clickPoint=event.target;
        console.log(clickPoint);
        let itemHeight=clickPoint.clientHeight/2;
        let itemWidth=clickPoint.clientWidth/2;
        
        if( clickPoint.classList.contains('target') ){

            if( clickPoint.classList.contains('item') ){
                    let pageY=event.pageY;
                    let pageX=event.pageX;
                    clickPoint.style.top=`${pageY-itemHeight}px`;
                    clickPoint.style.left=`${pageX-itemWidth}px`;
                    clickPoint.classList.add('zIndex');
                    clickPoint.classList.add('hover');
                }

        }

         
                table.addEventListener('mouseup',mup,false);
       }

       function mup(){
           table.removeEventListener('mousemove',mmove,false);
           event.target.classList.remove('target');
           event.target.classList.remove('zIndex');
       }

       table.addEventListener('mousedown',mdown,false);

       let table=document.querySelector('.box_cover');

       function mdown(){
           let clickPoint=event.target;
            event.target.classList.add('target');

            table.addEventListener('mousemove',mmove,false);
            if( clickPoint.classList.contains('target') ){

                if( clickPoint.classList.contains('item') ){
                    clickPoint.classList.add('zIndex');
                    clickPoint.classList.add('hover');
                }

            }
            table.addEventListener('mouseup',mup,false);
       }

       function mmove(){
        let clickPoint=event.target;
        console.log(clickPoint);
        //座標の読み取り
        let itemHeight=clickPoint.clientHeight/2;
        let itemWidth=clickPoint.clientWidth/2;
        
        if( clickPoint.classList.contains('target') ){
            if( clickPoint.classList.contains('item') ){
                    let pageY=event.pageY;
                    let pageX=event.pageX;
                    clickPoint.style.top=`${pageY-itemHeight}px`;
                    clickPoint.style.left=`${pageX-itemWidth}px`;
                }
        }

       }

       function mup(){
           table.removeEventListener('mousemove',mmove,false);
           event.target.classList.remove('target');
           event.target.classList.remove('zIndex');
       }

       table.addEventListener('mousedown',mdown,false);

Comments

[m.ts10806]

「素早く」ってどれくらいでしょうか。
動かすことに集中しすぎてマウスONが離れてないとかないですか？

[knight1220]

マウスダウンが離れているということはありません。

文章で説明するのは非常に説明するのは難しいのですが、
マウスを鋭く動かすといえばいいのでしょうか、ある程度ゆっくり動かしている間は実現したい挙動をしますが、一気ににマウスの移動量を増やすと対象が置き去りにされマウスポインタのみが移動してしまう状態です。
マウスダウンしたときにクラス（target）を付与しマウスアップしたときクラスを外すようにしているのですが置き去りにされた要素を検証画面で確認するとクラス名が残ったままの状態になっています。

Answer 1

mousemove は、マウスポインタの移動中に連続的に発火するイベントですので
イベントリスナは、処理内容を座標の変化に応じた内容に特化して軽量化してください。

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

マウス関連の mousedown, mousemove, mouseup を３つセットで用いるベントは
発火頻度も考慮して実装します。

1. mousedown ... 初期化（2. 3. のイベントリスナをアタッチ）
2. mousemove ... 座標取得と更新制御をできるだけ軽量な処理にする。

（リフレッシュレートが高い閲覧環境では何回かに１度にすることも検討する）
3. mouseup ... クリーンナップ（2. 3. のイベントリスナをデタッチ）

※ window 表示の PC用ブラウザなどは、押下したままウィンドウ枠の外でマウスボタンの開放なども発生しうるので focus / blur など、他のイベントを補助的に利用するなどして対策します。

---

追記）コメントを受けて
状態の変化に応じてイベントが発火していますので、実際の操作と紐付けて考えます。

• マウスイベントを可視化する ... 実際の操作に対応するイベント発生状況が確認できます。

---

ドラッグドロップの練習として

マウスイベントだけで実装する以外に、MDN：ドラッグ操作でもドラッグ＆ドロップを学習できると思います
（ページ左のメニューにある「イベント」セクションで案内されている各イベントも要チェック）。

DragEvent は MouseEvent を継承しているので、ご質問のようなMouse操作と同様に座標取得ができます。

Comments

[knight1220]

回答ありがとうございます。
返信が遅くなってしまい申し訳ございません。
なんとなくですが、コードを書く順番が悪いためすごく処理が重くなっているのということは理解できました。
回答いただいた内容が理解できない点が多いのでまだまだ理解できていないのだなと実感しました。
とりあえずいただいた回答を理解できるようになるまで調べてみてそれでも理解できなければもう一度質問させていただきます。

[knight1220]

早速質問になってしまうのですが、classList.add()がmousedown に移動しても動作するというのは'zIndex'と'hover'のことという認識で間違いないでしょうか？

[AkitoshiManabe]

そのとおりです。
「実際の操作が、表示などに影響するタイミングがあるので、最適なタイミングになるように調整しましょう」ということです。

[knight1220]

コードを修正してみたのですが、
置き去りされる現象は改善されませんでした。
他の書き方を考えたほうがいいのでしょうか？
もしお時間がありましたらご教授いただければ幸いです。

[AkitoshiManabe]

マウスイベントでの実装だと余分なイベント発火が起こるようですので、ドラッグ&ドロップ用にネイティブ実装されたイベントを使うほうが良いみたいですね。
https://developer.mozilla.org/ja/docs/Web/API/Document/drag_event のサンプルコードでは「This div is draggable」を移動できますが、置き去り現象は起こらないようです。
編集されたコードにおいて、イベントリスナ内で event.target のように event 情報を利用する場合はリスナの引数に event を指定しましょう。