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 选择器。

您可以修改您的代码以在每次放置项目时创建一个“唯一”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();
        });
    }
});
});