通过拖放复制bootstrap td。

Question

你好，我需要的是，用户可以关联的名称在右边的表与那些在左边的表，填补了左表的空列，所以在一个bootstrap表拖动的值从其他表中的一行以上，该值不会从初始表消失。所以我想用jquery ui来做，但它不工作，我只能拖动第一个值，当我把它拖到可拖动的空位上后，它就从初始表中消失了，而且不填满其他表。

那是代码

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

我移动的值是使用php fetch_array()函数从数据库中获取的，并且在一个 <td> 的第二张表。

<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

不清楚你的帖子里要找的是什么。下面是根据我所能辨别出来的一个更新的例子。

$(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>

这允许用户将名字从右侧表格拖到左侧表格的最后一列。由于我们正在创建一个新的元素，我用Drag项中的Text填充了它，所以原始元素没有被触动。我使用CSS来使它看起来像原来的元素。

查看更多。https:/api.jqueryui.comdraggable