jsでドラッグ&ドロップをeach文を使った要素に対してできるようにしたいです。

Question

前提・実現したいこと

アルバイトのシフト作成のアプリを作っています。
DBに保存されたデータをjsを使い繰り返し処理されているdiv要素をshift_tableのtdの中にドラッグ&ドロップができるようにしたいと考えています。

発生している問題・エラーメッセージ

ドラッグする要素をeach文を使って記述する必要があり、そのためjsでIdを使っての操作ができず最初の1つ目の要素に対してのみドラッグ&ドロップができるようになってしまいます。（2つ目以降の要素はドラッグはできますが、ドロップしたらそこに1つ目の値が入り込む）

これを各値それぞれドラッグ&ドロップできるようにしたいのですが、どのように記述すればいいかがわからずに困っています。

該当のソースコード

<div class="shift_main">
  <%= params[:date_save] %>
  <div class="shift_set">
    <table class="shift_table">
      <tbody class="shift_table_body">
        <tr class="shift_line">
          <td id="shift_num1" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num2" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
        <tr class="shift_line">
          <td id="shift_num3" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num4" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
        <tr class="shift_line">
          <td id="shift_num5" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num6" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
        <tr class="shift_line">
          <td id="shift_num7" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num8" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
        <tr class="shift_line">
          <td id="shift_num9" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num10" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
        <tr class="shift_line">
          <td id="shift_num11" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num12" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
        <tr class="shift_line">
          <td id="shift_num13" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num14" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
        <tr class="shift_line">
          <td id="shift_num15" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num16" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
        <tr class="shift_line">
          <td id="shift_num17" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num18" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          </tr>
        <tr class="shift_line">
          <td id="shift_num19"  ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
          <td id="shift_num20" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
        </tr>
      </tbody>
    </table>
    <table>
      <tbody>
        <% @num.each do |day| %>
          <tr>
            <td class="employee">
              <div id="human1" class="employee_name" draggable="true" ondragstart="onDragStart(event);">
                <%= day.name %>
              </div>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript">
  function onDragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
}

function onDragOver(event) {
  event.preventDefault();
}

function onDrop(event) {
  const id = event.dataTransfer.getData('text');
  const draggableElement = document.getElementById(id);
  const dropzone = event.target;
  dropzone.appendChild(draggableElement);
  event.dataTransfer.clearData();
}
</script>

試したこと

document.getElementsByClassNameを使って要素を取得し、それに対してArray.prototypeの操作をいくつか試しました。具体的にはforEachとsliceを使って試しましたがうまく行きませんでした。

補足情報（FW/ツールのバージョンなど）

Rubyのバージョンは6.0.0です。また、カレンダーの機能を使うためにsimplecalendarのGemを使用しています。

初学者にて質問に至らない点もあるかと思いますが、追記などはすぐに対応できるようにしますので、お答えいただけると幸いです。

Answer 1

idを変えながらdivを作れば一発ぽいですが、それだけでは何なのでやってみました。
何番目のdiv.employee_nameかで特定します。

function onDragStart(event)
{
    const nodes = Array.from(document.querySelectorAll(".employee_name"));
    const index = nodes.findIndex(v=>v===event.target);
    event.dataTransfer.setData('text/plain', index);
}


function onDragOver(event) {
  event.preventDefault();
}

function onDrop(event)
{
    event.preventDefault();
    const index = event.dataTransfer.getData('text');
    const draggableElement = document.querySelectorAll(".employee_name")[index];
    const dropzone = event.target;
    dropzone.appendChild(draggableElement);
}

※追記
このままだと同じ場所に複数のdivをドロップした時に、位置によっては結果がおかしくなるので、
さらに修正します。

function onDrop(event)
{
    event.preventDefault();
    const index = event.dataTransfer.getData('text');
    const draggableElement = document.querySelectorAll(".employee_name")[index];
    const dropzone = event.currentTarget;//←ここ
    dropzone.appendChild(draggableElement);
}

Comments

[hakushin_man]

お答えいただきありがとうございます！！

findIndexというものを初めて知りました。お答えいただける直前まで自分で頑張って解決しようとしていたのですが、こんなに綺麗な文ではなくすごく助長な文になってしまっていたので驚きです。。

改めてありがとうございます。

[hakushin_man]

重ね重ねありがとうございます！！

currentTargetで常に参照しているイメージでしょうか？

[AT_2nd]

event.targetはイベントが発生した要素、event.currentTargetはイベントリスナが登録されている要素という差があります。この辺は、イベントバブルで調べるといいでしょう。
今回のケースではdivがtdにドロップされて移動した後、そのdivにさらに別のdivがドロップされた場合、targetにはドロップ先のdivが、currentTargetにはtdが入ります。その結果、移動先がtargetのままだと一つ目のdivの中に二つ目のdivが移動するといった事になってしまうので、それを避けるためにcurrentTargetに修正しました。