首頁猿問如何在動態添加行和單元格的表格中拖...

如何在動態添加行和單元格的表格中拖放單元格內容？

JavaScript

慕森卡 2022-07-21 09:55:05

我在使用動態生成的表格進行拖放時遇到了困難。該界面根據用戶選擇呈現表格行和單元格的網格。我想做的是使用戶能夠將一個單元格、一個 div 或 span 的內容拖到另一個單元格中。近 6 年前的這段對話與我想要做的很接近。但它無法處理表具有動態添加的行的情況。拖放表格單元格內容$(function() { $('.event').on("dragstart", function(event) { var dt = event.originalEvent.dataTransfer; dt.setData('Text', $(this).attr('id')); }); $('table td').on("dragenter dragover drop", function(event) { event.preventDefault(); if (event.type === 'drop') { var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id')); de = $('#' + data).detach(); de.appendTo($(this)); }; }); $('#addRow').on('click', function() { $('#targetTable > tbody:last-child').append('<tr><td></td><td></td><td></td></tr>'); });});這個基于該代碼的示例演示了我的問題。 https://jsfiddle.net/Stormjack/osvu6mea/11/您可以成功地將藍色塊拖放到前兩行中的任何單元格中。但是使用“添加行”按鈕添加一個新行，您不能將該塊放入任何新行。您仍然可以將可拖動范圍移動到前兩行中的不同單元格。但它無法拖入新行。我怎樣才能克服這個限制？我很樂意使用 HTML5 或 JavaScript 或 jQuery 或其他客戶端庫的任意組合。謝謝你的幫助。

查看完整描述

2 回答

有只小跳蛙

TA貢獻1824條經驗獲得超8個贊

這是我的解決方案，基于 saintvixalien 的幫助。

$(function() {

initDragAndDrop();

$('#addRow').on('click', function() {

$('#targetTable > tbody:last-child').append('<tr><td></td><td></td><td></td></tr>');

clearDragAndDrop();

initDragAndDrop();

});

function clearDragAndDrop() {

$('.event').off();

$('table td').off('dragenter dragover drop');

}

function initDragAndDrop() {

$('.event').on('dragstart', function(event) {

var dt = event.originalEvent.dataTransfer;

dt.setData('Text', $(this).attr('id'));

});

$('table td').on('dragenter dragover drop', function(event) {

event.preventDefault();

if (event.type === 'drop') {

var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));

de = $('#' + data).detach();

de.appendTo($(this));

}

});

}

https://jsfiddle.net/Stormjack/osvu6mea/15/

反對回復 2022-07-21

守候你守候我

TA貢獻1802條經驗獲得超10個贊

問題是，當您添加"dragenter dragover drop"事件偵聽器時，只有 2 行，這意味著對于添加的每個新行，您都必須向其中添加事件偵聽器。

注意：如果每次添加新行時都運行事件偵聽過程，您最終會得到具有 2 個或更多事件偵聽器的舊行，這些事件偵聽器性能不佳并且可能導致問題。

一種解決方案是添加具有類的新行，new-row然后將事件偵聽器添加到new-rows，然后刪除new-rowid。

JSFiddle：https ://jsfiddle.net/rcf4qp85/

$(function() {

$('.event').on("dragstart", function(event) {

var dt = event.originalEvent.dataTransfer;

dt.setData('Text', $(this).attr('id'));

});

initnewrows();

$('#addRow').on('click', function() {

$('#targetTable > tbody:last-child').append('<tr class="new-row"><td></td><td></td><td></td></tr>'); initnewrows();

});

function initnewrows() {

$('table tr.new-row td').on("dragenter dragover drop", function(event) {

event.preventDefault();

if (event.type === 'drop') {

var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));

de = $('#' + data).detach();

de.appendTo($(this));

}

});

$('table tr.new-row').removeClass('new-row');

}

您還必須將類添加new-row到最初的 presenttrs中。

<thead>

</tr>

</thead>

<tbody>

</tr>

</tr>

</tbody>

</table>

<p>

You can successfully drag the "Move Me" block to any cell in the first two rows.<br/>But add a new row with the "Add Row" button, and you can't drop that block into any new row.

</p>

JSFiddle：https ://jsfiddle.net/rcf4qp85/

反對回復 2022-07-21

2 回答
0 關注
84 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在動態添加行和單元格的表格中拖放單元格內容？

如何在動態添加行和單元格的表格中拖放單元格內容？

2 回答

添加回答

如何在動態添加行和單元格的表格中拖放單元格內容？

如何在動態添加行和單元格的表格中拖放單元格內容？