Javascript 如何从列表拖放到特定的表格单元格

如何从选项列表中拖放我可以将列表中的特定选项拖放到表格单元格中，在这种情况下，拖放到客户地址的任何单元格中，（可以是with或table），并使用从列表中拖动的选项更改单元格值

我一直在尝试使用sortableJS来实现这一点，但我可以将选项作为一行，而不是放在特定的单元格中

我想做的示例：

代码如下：

CSS:

.div表{
显示：表格；
宽度：自动；
背景色：#eee；
边框：1px实心#666666；
边框间距：5px；/*单元格间距：IE对此的支持较差*/
}
.div表行{
显示：表格行；
宽度：自动；
明确：两者皆有；
}
.div表列{
float:left；/*修复错误浏览器*/
显示：表格列；
宽度：200px；
背景色：#ccc；
}

HTML:

客户ID
客户地址
001
003
ttt
Mkkk
列表

选择1
选择2

JS :

const tablea=document.getElementById（“表左”）；
const list=document.getElementById（“列表”）；
新的可排序表（表a{
组：“共享”//将两个列表设置为同一组
动画：150，
});
新的可排序（列表{
组：“共享”，
动画：150，
});

    <style>
  .div-table {
    display: table;
    width: auto;
    background-color: #eee;
    border: 1px solid #666666;
    border-spacing: 5px; /* cellspacing:poor IE support for  this */
  }
  .div-table-row {
    display: table-row;
    width: auto;
    clear: both;
  }
  .div-table-col {
    float: left; /* fix for  buggy browsers */
    display: table-column;
    width: 200px;
    background-color: #ccc;
  }
</style>

    <form id="form1">
  <div class="div-table" id="table-left">
    <div class="div-table-row">
      <div class="div-table-col" align="center">Customer ID</div>
      <div class="div-table-col">Customer Address</div>
    </div>
    <div class="div-table-row">
      <div class="div-table-col">001</div>
      <div class="div-table-col">003</div>
    </div>

    <div class="div-table-row">
      <div class="div-table-col">ttt</div>
      <div class="div-table-col">Mkkk</div>
    </div>
  </div>
</form>

<div class="table-list" id="list">
  <p style="background: red; width: 200px">List</p>
  <div>Option 1</div>
  <div>Option 2</div>
</div>

<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<script>
  const tablea = document.getElementById("table-left");
  const list = document.getElementById("list");
  new Sortable(tablea, {
    group: "shared", // set both lists to same group
    animation: 150,
  });

  new Sortable(list, {
    group: "shared",
    animation: 150,
  });
</script>