jquery - マウス ポインタの下の DIV のリストを取得する (mouseup イベント)

Question

私はJQUERYの初心者です。「CANVAS」要素の下にいくつかのDIV要素を配置しました。DIV要素をクリックすると線画が始まります。別の DIV でマウスを放すと、停止します (これらの DIV 要素に線が描画されます)。追加したいのですが、DIVの外でマウスを離すと、描画がクリアされます。このイベントをキャッチして図面をクリアする正しい方法がわかりません。私を助けてください。

HTML 要素の構造

 <div id="content">
    <div id="draganddrop" >
        <div id="drag_1" class="hitbox"></div>
        <div id="drag_2" class="hitbox"></div>
        <div id="drop_1" class="hitbox">
        <div id="drop_2" class="hitbox">
    </div>
    <canvas id="linedrawing" style="pointer-events:none" class="border"></canvas>
</div>

クリックイベント

<script>
    $(function() { 
        $("#drag_1").mousedown(startDrawing);
        $("#drag_2").mousedown(startDrawing);

        $("#drop_1").mousedown(startDrawing);
        $("#drop_2").mousedown(startDrawing);

        $("#draganddrop").mousemove(updateDrawing);
        $("#draganddrop").mouseup(finishDrawing);
    });
</script>

ユーザーが「drag_1、drag_2、drop_1、drop_2」の外でマウスを離した場合、描画をクリアしたい。私を助けてください