通过拖放复制引导 td

Posted 2023-05-08

【中文标题】通过拖放复制引导 td

【英文标题】：Copy bootstrap td by drag and drop

【发布时间】：2020-08-20 10:40:18

【问题描述】：

您好，我需要用户可以将右侧表格的名称与左侧表格的名称相关联，填充左侧表格中的空列，因此引导表中有不止一行从另一个表，并且该值不会从初始表中消失。所以我正在尝试使用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>

【问题讨论】：

欢迎来到 Stack Overflow。如果我理解正确，您希望用户能够重新排列表格中的列，对吗？

@Twisty 我希望用户将右侧表格的名称与左侧表格的名称相关联，对不起我在帖子中的错误解释，现在我会更正它

还是有点不清楚。因此，如果用户将“Limone Salmone”从右侧拖到左侧表格，您希望在自己的列中使用“Limone”和“Salmone”创建一个新行？

【参考方案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.com/draggable/

【讨论】：

它工作正常！我只更改了几件事：更改了左侧表中的 id，以便将:last 拖到第二个脚本中，因为这里的名称是可变的，因为它们是从数据库中获取的。