How to drag and drop from a list to a specific table cell

How can I do a Drag and drop that from a list of options I can drag an specific option of the list and drop it in a table cell, in this case to any cell of Customer Address, (Can be with or a table) and change the cell value with the option that I’m dragging from the list.

I’ve been trying to do that with sortableJS but I just could to put the option as a row not in the specific cell.

Example of what I want to do:

enter image description here

This is the code:


  .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;


    <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 class="div-table-row">
      <div class="div-table-col">001</div>
      <div class="div-table-col">003</div>

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

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


<script src=""></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,

Source: Ask Javascript Questions