Jquery on Drop affects children elements in column

Question

Making a Kanban board with draggable and droppable cards. It works but it also allows you to drop into the children elements and the issue-cards will nest into each other which is not the desired function. How do I drop into .status-column but not into its child .issue-card?

HTML

  <div class="issues-kanban d-flex flex-row">
    <% Issue.statuses.each_with_index do |status, index| %>
    <div class="d-flex flex-column issue-column">
      <div class="status-name d-flex border border-rocket-grey-sky-dark">
        <%= status %>
      </div>
      
<!-- the block in question -->
      <div id="<%= status %>" class="status-column d-flex flex-column border border-rocket-grey-sky-dark">
        <div draggable="true" id="issue<%=index%> " class="issue-card border border-rocket-blue w-100">
          issue <%=index%>
        </div>
      </div>
<!-- end block -->

    </div>
    <% end %>
  </div>

JS

var dragged_item = "";

$('.issue-card').on('dragstart', function(event){
  dragged_item = event.target.id;
  console.log("dragged_item ondragstart: " + dragged_item );
});

$('.status-column').on("dragover", function(event) {
    event.preventDefault();
});

$('.status-column').on("drop", function(event) {
    event.preventDefault();
    event.target.appendChild(document.getElementById(dragged_item));
    console.log('droping ' + dragged_item + 'into: '  + event.target.id);
});

Answer 1

I thing this is the problim

$('.status-column').on("drop", function(event) {
    event.preventDefault();
    if(event.target === this){
        this.appendChild(document.getElementById(dragged_item));
        console.log('droping ' + dragged_item + 'into: '  + event.target.id);
   }
 });