JQueryのドラッグ＆ドロップ：最初にドロップされたアイテムのみを削除できます

Question

ドラッグ可能な領域から削除できない限り、同じ行を再度ドロップすることはできません。

これは1つの項目で問題なく機能しますが、ドロップされた領域から追加項目を削除することはできません。ドロップされた領域から最初にドラッグされた項目だけが削除されます。他の項目で削除をクリックすると何も起こりません。また、ドロップされた領域は、ドラッグされたアイテムの位置/プレースホルダを保持するので、ドロップ領域に新しいアイテムをドラッグすると、最後のアイテムがあった場所の下に配置されます。

<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セレクタを破らないようにする必要があります。あなたがアイテムをドロップすると

あなたは「ユニーク」のIDを毎回作成するようにコードを修正することがあります。

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