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的数量，并添加类似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>

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

1 个答案: