拖放表-将单元格移动到不同的列

Drag and Drop Table - moving cells to different columns

本文关键字：移动单元格拖放更新时间：2023-09-26

我正在尝试制作一个拖放表。JQuery在他们的网站上做了一个演示后，我正在为我的代码建模，但我无法让我的代码发挥作用。我也不知道我所做的是否是我最好的选择。

我想将表格单元格从一列移动到另一列。我的代码中是否缺少什么，或者有更好的解决方案吗？

<script>
      $(function() {
        $( "#paid, #partially_paid, #owes" ).sortable({
          connectWith: ".tdPayment"
        }).disableSelection();
      });
</script>

表

<table class="paymentTable" id="dragTable">
    <tr>
        <th class="thPayment">Paid</th>
        <th class="thPayment">Partially Paid</th>
        <th class="thPayment">Owes</th>
    </tr>
    <tr>
        <td class="tdPayment" id="paid">
        <?php
            if ($paid_name == true) {
                echo $paid_name;
            } else {
                echo "No one has paid";
            }
        ?>
        </td>
        <td class="tdPayment" id="partially_paid">
        <?php 
            if ($partially_paid__name == true) {
                echo $partially_paid__name . " - " . $partially_paid_amount;
            } else {
                echo "No one has made a partial payment";
            }
        ?>  
        </td>
        <td class="tdPayment" id="owes">
        <?php
            if ($owes_name == true) {
                echo $owes_name;
            } else {
                echo "Everyone has paid something";
            }
        ?>  
        </td>
    </tr>   
</table>

在DIV 中添加更新

<table class="paymentTable" id="dragTable">
        <tr>
            <th class="thPayment">Paid</th>
            <th class="thPayment">Partially Paid</th>
            <th class="thPayment">Owes</th>
        </tr>
        <tr>
            <td class="tdPayment" id="paid">
                            <div>
            <?php
                if ($paid_name == true) {
                    echo $paid_name;
                } else {
                    echo "No one has paid";
                }
            ?>
                            </div>
            </td>
            <td class="tdPayment" id="partially_paid">
            <div>
            <?php 
                if ($partially_paid__name == true) {
                    echo $partially_paid__name . " - " . $partially_paid_amount;
                } else {
                    echo "No one has made a partial payment";
                }
            ?>  
            </div>
            </td>
            <td class="tdPayment" id="owes">
            <div>
            <?php
                if ($owes_name == true) {
                    echo $owes_name;
                } else {
                    echo "Everyone has paid something";
                }
            ?>  
            </div>
            </td>
        </tr>
    </table>

当您使用$("#paid, #partially_paid, #owes" ).sortable({时，您正在使其子元素可排序，因此，结果是使每个td中的元素可排序并且可以相互拖动。如果您允许将td拖动到其他列，那么您可能必须计算每列中有多少td，并添加类似rowspan的内容以使表看起来不难看（此外，您可能还希望将th拖动），不如在您的每个td中创建一些div，然后简单地将div拖动到不同的列？

$(function() {
        $( "#paid, #partially_paid, #owes" ).sortable({
          connectWith: ".tdPayment",
          remove: function(e, ui) {
            var $this = $(this);
            var childs = $this.find('div');
            if (childs.length === 0) {
               $this.text("Nothing");
            }
          },
          receive: function(e, ui) {
            $(this).contents().filter(function() {
                return this.nodeType == 3; //Node.TEXT_NODE
             }).remove();
          },
        }).disableSelection();
      });

table {
  border : solid 1px #000;
}
th, td {
  width: 100px;
  margin: 0px auto;
}
div {
  background-color: #0cc;
   margin: 1px auto;
   width: 50px;
   height: 30px;
   text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table class="paymentTable" id="dragTable">
    <tr>
        <th class="thPayment">Paid</th>
        <th class="thPayment">Partially Paid</th>
        <th class="thPayment">Owes</th>
    </tr>
    <tr>
        <td class="tdPayment" id="paid">
            <div > A </div>
            <div> B </div>
            <div> C </div>
        </td>
        <td class="tdPayment" id="partially_paid">
            <div> D </div>
            <div> E </div>
            <div> F </div>
        </td>
        <td class="tdPayment" id="owes">
            <div> G </div>
            <div> H </div>
            <div> I </div>
        </td>
    </tr>   
</table>