仅在 table 列中复制、拖放 table 个单元格 - JS

Question

我有一个 table，我只能 drag/drop 跨不同列的单元格。但是，我想要在将单元格拖放到同一列时复制单元格的功能。如果一列已有值，我们需要用粘贴的值替换该值。请指教

这是我的代码：

$(document).ready(function() {
  $('.event-1').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('col-1'));
      de = $('#' + data).detach();
      de.appendTo($(this));
    };
  });
  $('.event-2').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('col-2'));
      de = $('#' + data).detach();
      de.appendTo($(this));
    };
  });
})

table th,
table td {
  height: 30px;
  width: 200px;
}

table span {
  display: block;
  background-color: #09C;
  height: 100%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="#our_table" border="1">
  <tr>
    <th>head1</th>
    <th>head1</th>
    <th>head1</th>
  </tr>
  <tr>
    <td><span class="event-1" id="col-1" draggable="true">aaa</span></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>sample</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><span class="event-2" id="col-2" draggable="true">bbb</span></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

感谢任何帮助。

Answer 1

每当拖动任何元素时，您都可以获得 td 和 tr 标记的 index() 并将它们保存在 setData() 方法中。现在，当您要删除该元素时，检查 td（您需要删除的位置）和 td（从获取跨度的位置）是否相同，如果它们匹配，只需获取在 setData 方法中设置的数据，使用该数据我们可以 detach() 该元素并附加到新的 td .

演示代码 :

$(document).on("dragstart", 'td span', function(event) {
  var dt = event.originalEvent.dataTransfer;
  dt.setData('Text', $(this).closest("td").index() + " , " + $(this).closest("tr").index()); //save index of td & tr
});
$('table td').on("dragenter dragover drop", function(event) {
  event.preventDefault();
  var index_ = $(this).index() //get index of td where we are dropping..
  if (event.type === 'drop') {
    var data = event.originalEvent.dataTransfer.getData('Text');
    var new_data = data.split(",") //get data which is set
    //check if the index of td from where span is taken and td where span is to drop is same..
    if (new_data[0] == index_) {
      $(this).text("") //clear if any text before...
      de = $(`tr:eq(${new_data[1]}) td:eq(${new_data[0]}) span`).clone() //detach() //get that element 
      $(de[0]).appendTo($(this)); //append
    }
  };
});

table th,
table td {
  height: 30px;
  width: 200px;
}

table span {
  display: block;
  background-color: #09C;
  height: 100%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="#our_table" border="1">
  <tr>
    <th>head1</th>
    <th>head1</th>
    <th>head1</th>
  </tr>
  <tr>
    <td><span draggable="true">aaa</span></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>sample</td>
    <td></td>
    <td><span draggable="true">ccc</span></td>
  </tr>
  <tr>
    <td></td>
    <td><span draggable="true">bbb</span></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

仅在 table 列中复制、拖放 table 个单元格 - JS

Copy, Drag and drop table cells only within a table column - JS

html

javascript

jquery

drag-and-drop