JQuery拖放：只能删除第一个被删除的项目

Question

我有一个可拖动的行的表格，它可以将药物拖放到可拖放区域，然后禁用，因此除非从可拖放区域中删除，否则同一行不能再次丢弃。

这适用于一个项目，但不适用于删除掉落区域中的其他项目。当点击删除其他项目时，只有第一个拖动的项目从删除的区域中删除，没有任何反应。此外，放置的区域为拖动的物品保留一个位置/占位符，因此，当我在拖放区域中拖放一个新物品时，它将放置在最后一个物品的下方。

<div class="table-responsive"> 
<table class="table table-striped"> 
    <thead> 
     <tr class="bb"> 
      <th class="artcl_hdr text-center"></th> 
      <th class="artcl_hdr text-center">Source</th> 
      <th class="artcl_hdr text-center">Title</th> 
      <th class="artcl_hdr text-center">Publish Date</th> 
      <th class="artcl_hdr text-center">Share</th> 
     </tr> 
    </thead> 
    <tbody> 
     <?php 
     if(is_array($bookmarks)) 
     { 
       echo '<tr class="bmkitem" id="'.$bookmark['aid'].'">'; 
       echo '<td class="text-center bkgcol-white"><a href="#" title="Delete bookmark" id="bkm_delete"><i class="fa fa-times fa-lg pomegranate" aria-hidden="true"></i></a></td>'; 
       echo '<td class="text-center"><span id="article_source" class="label '.$label.'">'.$bookmark['name'].'</span></td>'; 
       echo '<td class="bkm-title text-left"><a href="'.$bookmark['link'].'" target="_blank" id="bookmark-link">'.$bookmark['title'].'</a></td>'; 
       echo '<td class="key-title text-center">'.$formatted_date.'</td>'; 
       echo '<td class="artcl_info text-left"><div class="add-this addthis_native_toolbox" data-url="'.$bookmark['link'].'" data-title="'.$bookmark['title'].'"></div></td>'; 
       echo '</tr>'; 
      } 
     } 
     ?> 
    </tbody> 
</table> 
</div> 

<div class="panel-body text-left" id="bkm-dropbox"> 
<div class="text-center"> 
    <p class="temp-text">Drag Bookmarks Here</p> 
</div> 
</div> 


$(document).ready(function() { 

$(".bmkitem").draggable({ 
    helper: "clone", 
    containment: "document", 
    cursor: 'move', 
    revert: 'true', 
    start: function(event, ui) { 
     source = $(this).find('#article_source').text() 
     contents = $(this).find('#bookmark-link').text(); 
    } 
}); 

$('#bkm-dropbox').droppable({ 
    hoverClass: 'hover', 
    acceptable: '.bmkitem', 
    containment: 'document', 

    drop: function(event, ui) { 
     $(this).find(".temp-text").remove(); 

     $(this).append('<span><a href="Javascript:void(0)"" id="drop_delete"><i class="fa fa-times fa-lg pomegranate left_pad_push" aria-hidden="true"></i></a>' + source + ' - ' + contents + '</span><br />'); 

     ui.draggable.draggable("disable"); 
     selected_row = ui.draggable.find("i").hide(); 

     $('#drop_delete').on('click', function() { 
      $(this).parent('span').remove(); 
      ui.draggable.draggable("enable"); 
      selected_row.show(); 
     }); 
    } 
}); 
}); 

Answer 1

您可以一次又一次创建具有相同ID的丢弃项目。元素的id在html中必须是唯一的。

可拖动/可拖拽的克隆掉落部分保留原始ID的常见错误。您需要删除或更改丢弃的ID以不打破DOM选择器。四月

$(document).ready(function() { 

$(".bmkitem").draggable({ 
    helper: "clone", 
    containment: "document", 
    cursor: 'move', 
    revert: 'true', 
    start: function(event, ui) { 
     source = $(this).find('#article_source').text() 
     contents = $(this).find('#bookmark-link').text(); 
    } 
}); 

var id = 0; 
$('#bkm-dropbox').droppable({ 
    hoverClass: 'hover', 
    acceptable: '.bmkitem', 
    containment: 'document', 

    drop: function(event, ui) { 
     $(this).find(".temp-text").remove(); 

     id++; 
     $(this).append('<span><a href="Javascript:void(0)"" id="drop_delete'+ id + '"><i class="fa fa-times fa-lg pomegranate left_pad_push" aria-hidden="true"></i></a>' + source + ' - ' + contents + '</span><br />'); 

     ui.draggable.draggable("disable"); 
     selected_row = ui.draggable.find("i").hide(); 

     $('#drop_delete' + id).on('click', function() { 
      $(this).parent('span').remove(); 
      ui.draggable.draggable("enable"); 
      selected_row.show(); 
     }); 
    } 
}); 
});