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

Question

我有一个表格，我只能在不同的列中拖放单元格。但是，我希望在将单元格拖放到同一列时复制单元格的功能。如果一列已经有一个值，我们需要用粘贴的值替换那个值。请指教。

这是我的代码：

$(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（从哪里获取 span）是否相同，如果它们匹配，只需使用该数据获取在 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>