通过拖放复制 bootstrap td

Question

您好，我需要用户可以将右边的table的名字和左边的table的名字关联起来，填充左边的空栏table ，因此 bootstrap table 中有不止一行从另一个 table 中拖出该值，并且该值不会从初始 table 中消失。所以我尝试使用 jquery ui 来做到这一点，但它不起作用，我只能拖动拳头值，在我将它拖到可放置的空 space 上后它消失了从头开始 table 并且不要填写另一个 table

这就是代码

<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() 函数从数据库中获取的，并且在我的第二个 table.[=14= 的 <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

不清楚您在 post 中寻找什么。这是一个基于我所见的更新示例。

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

这允许用户将名称从右侧 table 拖到左侧的最后一列 table。因为我们正在创建一个新元素，所以我用 Drag 项中的文本填充它，以便原始元素保持不变。我用 CSS 让它看起来像原来的那样。

查看更多：https://api.jqueryui.com/draggable/

通过拖放复制 bootstrap td

Copy bootstrap td by drag and drop

jquery

jquery-ui

drag-and-drop

bootstrap-table