Перетащите значение ячейки из HTML-таблицы, которая сначала генерируется из PHP.

Question

Я динамически создал таблицу HTML с использованием PHP и запросов из базы данных MySQL.

После создания этой таблицы я хотел бы перетаскивать (фактически перетаскивать) конкретные значения ячеек в другую таблицу..

Я использую следующие javascript / jquery и HTML5 для создания этой функции перетаскивания.Я

<script>

function dragStart(event)
{
    event.dataTransfer.setData("text",event.target.id);
}


function allowDrop(event) {
    event.preventDefault();
    event.target.style.color = 'blue'
}
    
function drag(event) {
        event.dataTransfer.setData("text", event.target.id);
        event.target.style.color = 'green';
    }
    
    function drop(event) {
        event.preventDefault();
        var data=event.dataTransfer.getData("text");
        var nodeCopy = document.getElementById(data).cloneNode(true);
        console.log(nodeCopy);
        nodeCopy.id = "newId"; /* We cannot use the same ID */
        event.target.appendChild(nodeCopy);
    }
</script>

Вот фрагмент кода, генерирующего таблицу:

$.ajax({
           method:"POST",
           url:"facility_id_dropdown.php?sid="+sid,
           contentType:"application/json; charset=utf-8",
           dataType:"json",
           success: function(data){
           jsonURL="facility_id_dropdown.php?sid="+sid+".json";
           $.getJSON(jsonURL, function(data){
           var station_programming='';
           $.each(data, function(key, value){
                station_programming+='<tr>';
                station_programming+='<td>'+value.call_sign+'</td>';
                station_programming+='<td>'+value.facility_id+'</td>';
                station_programming+='<td>'+value.operator+'</td>';
                station_programming+='<td><span class="event" ] draggable="true" ondragover="allowDrop(event)">' +value.primary_programming+'</span></td>

Как вы можете сказать, я хочу иметь возможность перетаскивать значение.primary_programming.

Я получаю следующую ошибку: "market_plans.php:150 Uncaught TypeError: Невозможно прочитать свойство 'cloneNode' с нулевым значением при удалении "

Я предполагаю, что это каким-то образом связано с тем фактом, что я генерирую эту таблицу и не имею статических идентификаторов.

Когда я назначаю статический идентификатор для <td> в моей таблице, я могу видеть значение ячейки, когда выполняю innerHTML.Но так как моя таблица будет разной длины и размеров, я не уверен, как динамически назначать имена.Я также не думаю, что это полезно для функции перетаскивания.

Я также пытался изменить свой код, используя:

event.dataTransfer.setData("text", $(this).attribute('id'))
data=event.dataTransfer.getData("text",$(this).attribute('id'))

Но эти изменения тоже не сработали.

Буду признателен за любую помощь!