html5ドラッグアンドドロップ - 不要なJavaScriptのループ

Question

私はhtmlとjavascriptでスケジュール表を作成しています。 unstyledフィドルはここにある：https://jsfiddle.net/tobyla/6xa225gx/

ユーザーが同じの日」列内の異なる役割に労働者をドラッグすることができます。要件の一部は、不在者を不在者列にドラッグして表示できることです。 （任意の日に複数のことができます）。

問題は、各追加の労働者がカラムに添加するためには、Javascriptを複数回、新しい名前を追加し、より多くの時間をループしていることです。

問題は、このコードの周りに根ざしているように見える：

else if (draggedItem != this && targetThisDay == thisDay && targetShiftPattern == "absentees") { //MH - swap if we're not dragging the item onto itself 
    copy = "<tr>" + $(this).clone(true,true) + "</tr>"; 
    $(this).after($(draggedItem).clone(true,true)); 
    $(draggedItem).replaceWith('<td class="dnd" draggable="true" data-dayoftheweek="monday" data-skillSet="skill2"> </td>'); 
    $(draggedItem).on("drop", handleDrop); 
    alert('absenteeism');     
    runIndex(); 
} 

任意の助けもappreciated-おかげでみんなだろう！

Answer 1

あなたの問題はrunIndex()同じ要素を再選択し、同じイベントハンドラを再結合することです。

これらのイベントを一度バインドするだけで済みます。

Updated fiddle。