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