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

Question

我正在尝试制作一个拖放表。在他们的网站上有一个演示 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>

Answer 1

当您使用$("#paid, #partially_paid, #owes" ).sortable({ 时，您正在使它们的子元素可排序，因此，结果是使每个td 中的元素可排序并且可以相互拖动。 好像您允许将td 拖到其他列，那么您可能需要计算每列中有多少tds 并添加类似rowspan 的内容以使表格看起来不奇怪（另外，您可能想要@ 987654326@ 也可以拖动），如何在每个 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>