Как обновить класс JQuery Draggable Item с идентификатором родителя, на который он упал?

Question

У меня есть скрипку здесь: https://jsfiddle.net/radmktryan/qfghjnm6/

Мой код:

HTML

<table id="#our_table" class="table table-striped"> 
    <tr> 
    <th>Stage 1</th> 
    <th>Stage 2</th> 
    <th>Stage 3</th> 
    </tr> 
    <tr> 
    <td id="stage1" data-uid="stage1"> 
     <span class="event" id="a" draggable="true">aaa</span> 
     <span class="event" id="b" draggable="true">bbb</span> 
    </td> 
    <td id="stage2" data-uid="stage2"> 
     <span class="event" id="c" draggable="true">ccc</span> 
     <span class="event" id="d" draggable="true">ddd</span> 
    </td> 
    <td id="stage3" data-uid="stage3"> 
     <span class="event" id="e" draggable="true">eee</span> 
     <span class="event" id="f" draggable="true">fff</span> 
    </td> 
    </tr> 
</table> 

JS

$(document).ready(function(){ 
    $('.event').on("dragstart", function (event) { 
     var dt = event.originalEvent.dataTransfer; 
     dt.setData('Text', $(this).attr('id')); 
    }); 
    $('.event').on("drop", function (event) { 
     var parentStage = $(this).parent().attr('id'); 
     $(this).addClass(parentStage); 
     console.log(parentStage); 

    }); 
    $('table td').on("dragenter dragover drop", function (event) { 
     event.preventDefault(); 
     if (event.type === 'drop') { 
      var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id')); 
      de=$('#'+data).detach(); 
      de.appendTo($(this)); 
     }; 
    }); 
}) 

То, что я хочу сделать: Я хочу обновить -класс item (который является «span»), когда он «отбрасывается» в другую ячейку таблицы. Класс, который нужно изменить, должен быть унаследован от его родительской таблицы.

Я могу вытащить правильный идентификатор, однако его «класс» присваивается неправильному элементу диапазона.

Я предполагаю, что мой код ошибочен, когда дело доходит до части «падения».

Заранее благодарен!

Answer 1

Вы пытались добавить класс к элементу, когда событие drop было запущено на одном из элементов span. При этом вы фактически добавляли элемент id родительского элемента в элемент span, в который вы добавляли элемент перетаскивания.

Слушатель drop события для .event элементов должны быть либо удален:

$('.event').on("drop", function (event) { 
    // ... 
    // I removed this event listener since you never intended 
    // to drop span elements inside of other span elements. 
}); 

Или вы могли бы изменить слушатель drop события для слушателя dragend событий вместо (который, вероятно, что вы хотели в первую очередь) ,

Updated Example

$('.event').on("dragend", function (event) { 
    var parentStage = $(this).parent().attr('id'); 
    $(this).addClass(parentStage); 
}); 

---

Однако, вы также можете просто добавить класс к элементу, когда он добавляется в td элемент, что drop событие обстреляли. При этом вам не нужен другой прослушиватель событий для dragend.

Updated Example

$('table td').on("dragenter dragover drop", function (event) { 
    event.preventDefault(); 

    if (event.type === 'drop') { 
     var id = event.originalEvent.dataTransfer.getData('Text', this.id); 
     var $draggable = $('#' + id).detach(); 
     $draggable.appendTo(this); 
     $draggable.addClass(this.id); 
    }; 
});