拖放表-將單元格移動到不同的列

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被拖動到另一列，那么你可能要計算有多少td中的每一列S和添加類似rowspan ，使表看起來不STANGE（也，你可能想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>