[英]jQuery add text between a href tags of td
我有一個鏈接表,可以從表中刪除這些鏈接,也可以將表行拖放到另一個div中。 一旦放到div中,我將禁用表行,以使其無法再次拖動,並且我還將刪除允許從表中刪除該行的鏈接。
這一切都很好。 在放置的div中,我添加了一個鏈接(超棒的X圖標),該鏈接允許從放置的區域中刪除項目/行。
因此,在放置區域中單擊刪除鏈接時,該行將被刪除,並且主表中的對應行將被啟用以再次拖動。
這一切都很好。 唯一不起作用的部分是將鏈接重新添加到表中的行。 當我最初從主表中拖動該行時,字體真棒圖標( fa-times
)從表行中刪除,然后當該行從放置區域中刪除時,我嘗試將圖標添加回主表行中,但是不好。
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>');
});
}
});
});
使用顯示隱藏部分解決。 感謝MelanciaUK。
僅對一項有效,但不適用於從放置區域刪除其他項。 從拖放區域中僅刪除第一個拖動的項目,在其他項目上單擊“刪除”時,則不會發生任何事情。 同樣,放置區域為拖動的項目保留位置/占位符,因此當我在放置區域中拖動新項目時,它將放置在最后一個項目的下方。
$(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();
});
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.