jQuery 在 td 的 href 标签之间添加文本

Question

我有 table 个 link，这些 link 可以从 table 中删除，我可以拖放 table排成另一个 div。放入 div 后，我禁用了 table 行，因此它不能被再次拖动，我还删除了允许从 table 中删除该行的 link。

一切正常。在放置的 div 中，我添加了一个 link（字体很棒的 X 图标），它允许从放置的区域中删除 item/row。

所以当在拖放区域点击删除link时，该行被删除并且主table中的对应行再次启用拖动。

一切正常。唯一不起作用的部分是将 link 添加回 table 中的行。当我最初从主 table 拖动该行时，字体真棒图标 (fa-times) 从 table 行中删除，然后当该行从拖放区域中删除时，我尝试将图标添加回主 table 行但效果不佳。

HTML

<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>

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

jQuery

$(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',

        out: function (event, ui) {
            var self = ui;
            ui.helper.off('mouseup').on('mouseup', function () {
                $(this).remove();
                self.draggable.remove();
            });
        },

        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");
            ui.draggable.find("i").remove();

            $('#drop_delete').on('click', function () {
                $(this).parent('span').remove();
                ui.draggable.draggable("enable");
                ui.draggable.find("td#bmk_delete").text('<i class="fa fa-times fa-lg pomegranate" aria-hidden="true"></i>');
            });
        }
    });
});

Answer 1

使用 show hide 已部分解决。谢谢 MelanciaUK。

适用于一项，但不适用于从拖放区域中删除其他项目。只有第一个拖动的项目从拖放区域中删除，当点击其他项目上的删除时，没有任何反应。此外，拖放区域为拖动的项目保留了一个 position/placeholder，因此当我在拖放区域中拖动一个新项目时，它被放置在最后一个项目所在的位置下方。

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

jQuery 在 td 的 href 标签之间添加文本

jQuery add text between a href tags of td

javascript

jquery

font-awesome