html - Jquery on Drop 影响列中的子元素

Question

使用可拖放的卡片制作看板。它可以工作，但它也允许您放入子元素，并且问题卡将相互嵌套，这不是所需的功能。如何放入 .status-column 但不放入其子 .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);
});

标签： htmljquerydom-eventsdrop

Answer 1

我觉得这是问题所在

$('.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);
   }
 });