如何在动态添加行和单元格的表格中拖放单元格内容？

Question

我在使用动态生成的表格进行拖放时遇到了困难。该界面根据用户选择呈现表格行和单元格的网格。

我想做的是使用户能够将一个单元格、一个 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 或其他客户端库的任意组合。谢谢你的帮助。

Answer 1

这是我的解决方案，基于 saintvixalien 的帮助。$(function() {&nbsp;initDragAndDrop();&nbsp;$('#addRow').on('click', function() {&nbsp; &nbsp; $('#targetTable > tbody:last-child').append('<tr><td></td><td></td><td></td></tr>');&nbsp; &nbsp; clearDragAndDrop();&nbsp; &nbsp; initDragAndDrop();&nbsp;});});function clearDragAndDrop() {&nbsp;$('.event').off();&nbsp;$('table td').off('dragenter dragover drop');}function initDragAndDrop() {&nbsp;$('.event').on('dragstart', function(event) {&nbsp; &nbsp; var dt = event.originalEvent.dataTransfer;&nbsp; &nbsp; dt.setData('Text', $(this).attr('id'));&nbsp;});&nbsp;$('table td').on('dragenter dragover drop', function(event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; if (event.type === 'drop') {&nbsp; &nbsp; &nbsp; var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));&nbsp; &nbsp; &nbsp; de = $('#' + data).detach();&nbsp; &nbsp; &nbsp; de.appendTo($(this));&nbsp; &nbsp; }&nbsp;});}https://jsfiddle.net/Stormjack/osvu6mea/15/

Answer 2

问题是，当您添加"dragenter dragover drop"事件侦听器时，只有 2 行，这意味着对于添加的每个新行，您都必须向其中添加事件侦听器。注意：如果每次添加新行时都运行事件侦听过程，您最终会得到具有 2 个或更多事件侦听器的旧行，这些事件侦听器性能不佳并且可能导致问题。一种解决方案是添加具有类的新行，new-row然后将事件侦听器添加到new-rows，然后删除new-rowid。JSFiddle：https ://jsfiddle.net/rcf4qp85/&nbsp; $(function() {&nbsp; &nbsp; $('.event').on("dragstart", function(event) {&nbsp; &nbsp; &nbsp; var dt = event.originalEvent.dataTransfer;&nbsp; &nbsp; &nbsp; dt.setData('Text', $(this).attr('id'));&nbsp; &nbsp; });&nbsp; &nbsp; initnewrows();&nbsp; &nbsp; $('#addRow').on('click', function() {&nbsp; &nbsp; &nbsp; $('#targetTable > tbody:last-child').append('<tr class="new-row"><td></td><td></td><td></td></tr>'); initnewrows();&nbsp; &nbsp; });&nbsp; });function initnewrows() {&nbsp; &nbsp; $('table tr.new-row td').on("dragenter dragover drop", function(event) {&nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; if (event.type === 'drop') {&nbsp; &nbsp; &nbsp; &nbsp; var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));&nbsp; &nbsp; &nbsp; &nbsp; de = $('#' + data).detach();&nbsp; &nbsp; &nbsp; &nbsp; de.appendTo($(this));&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp;$('table tr.new-row').removeClass('new-row');}您还必须将类添加new-row到最初的 presenttrs中。&nbsp; <table id="targetTable" border="1">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr class="new-row">&nbsp; &nbsp; &nbsp; &nbsp; <th>Col 1</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Col 2</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Col 3</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr class="new-row">&nbsp; &nbsp; &nbsp; &nbsp; <td><span class="event" id="a" draggable="true">Move Me</span></td>&nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr class="new-row">&nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table>&nbsp; <p><button id='addRow'>Add Row</button></p>&nbsp; <p>&nbsp; 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.&nbsp; </p>JSFiddle：https ://jsfiddle.net/rcf4qp85/