Copy bootstrap td by drag and drop

Question

Hello I need that the user can associate the names of the table on the right with those of the table on the left, filling the empty column in the left table, so more than one row in a bootstrap table dragging that values from an other table and that values does not disappear from the initial table. So I'm trying to do that using jquery ui, but it's doesn't works, I can drag only the fist value, after i drag it on the droppable empty space it's disappear from the start table and don't fill the other table

That's the code

<script>
    $( function() {
     $( "#draggable").draggable();
     $( "#droppable" ).droppable({
     accept: "#draggable",
     classes: {
     "ui-droppable-active": "ui-state-active",
     "ui-droppable-hover": "ui-state-hover"
     },
    drop: function( event, ui ) {
     $( this )
      .addClass( "ui-state-highlight" )
      .find( "td" )
       }
     });
    });</script>

the value that I move are taken from database using php fetch_array() function and are in a <td> of my second table.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    
      <section class="container-fluid row justify-content-between">
      <!--Table-->
      <div class="col table-responsive">
        <table class="table table-hover table-bordered w-auto" id="tabellaSos">
          <!--Table head-->
          <thead class="thead-dark">
            <tr>
              <th>#</th>
              <th>Surname</th>
              <th>Name</th>
              <th id="droppable" class="ui-widget-header"> chosen <th>
            </tr>
          </thead>
          <tbody>
            <tr>
             <th scope="row">1</th>
              <td>Leopardi</td>
              <td>Giacomo</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    <!--Table-->


    <div class="row justify-content-center">
      <!--Table-->
      <div class="col table-responsive">
        <table class="table table-hover table-bordered w-auto" id="tabellaSos">
          <!--Table head-->
          <thead class="thead-dark">
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Timecode</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td id="draggable" class="ui-widget-content">Limone Salmone</td>
              <td>SU5</td>
          </tbody>
        </table>
      </div>
    </div>
    <!--Table-->
    </div>
  </section>

Answer 1

It's not clear what you are looking for in your post. Here is an updated example based on what I could discern.

$(function() {
  $("#draggable").draggable({
    appendTo: "body",
    helper: function(e) {
      return $("<div>", {
        class: "drag-helper"
      }).html($(e.target).text().trim());
    },
    revert: "invalid"
  });
  $("#tabellaSos > tbody > tr > td:last").droppable({
    classes: {
      "ui-droppable-active": "ui-state-active",
      "ui-droppable-hover": "ui-state-hover"
    },
    drop: function(event, ui) {
      $(this).html(ui.helper.text());
    }
  });
});

.drag-helper {
  border: 1px solid #dee2e6;
  padding: .75rem;
  vertical-align: top;
  box-sizing: border-box;
  color: #212529;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<section class="container-fluid row justify-content-between">
  <!--Table-->
  <div class="col table-responsive">
    <table class="table table-hover table-bordered w-auto" id="tabellaSos">
      <!--Table head-->
      <thead class="thead-dark">
        <tr>
          <th>#</th>
          <th>Surname</th>
          <th>Name</th>
          <th>Chosen</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Leopardi</td>
          <td>Giacomo</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--Table-->
  <div class="row justify-content-center">
    <!--Table-->
    <div class="col table-responsive">
      <table class="table table-hover table-bordered w-auto" id="tabellaSos">
        <!--Table head-->
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Timecode</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td id="draggable" class="ui-widget-content">Limone Salmone</td>
            <td>SU5</td>
        </tbody>
      </table>
    </div>
  </div>
  <!--Table-->
</section>

This allows the User to Drag the Name from the right-hand table across to Last column of the left-hand table. Since we're creating a new element, I populated it with the Text from the Drag item so that the original element is left untouched. I used CSS to make it look like the original.

See More: https://api.jqueryui.com/draggable/