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

I am attempting to make a drag and drop table. I was modelling my code after a demo JQuery has on their site, but I can't get mine to work. I also don't know if what I am doing is the best option for me.

我试图制作一个拖放表。在我们的网站上有一个演示JQuery之后,我正在为我的代码建模,但我不能让我的工作。我也不知道我在做什么对我来说是最好的选择。

I am wanting to move the table cells from one column to another. Is there something I'm missing with my code or is there a better solution for this?

我想将表格单元格从一列移动到另一列。我的代码中是否有一些我缺少的东西,或者有更好的解决方案吗?

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

Table

<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>

UPDATE WITH ADDED IN DIV

在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>

1 个解决方案

#1

When you use $("#paid, #partially_paid, #owes" ).sortable({ you're making the their child element to be sortable, so, the result is make the elements in each td sortable and can be dragged to each other. As if you allow td to be dragged to other column, then you may have to calculate how many tds in each column and add something like rowspan to make the table looks not stange(also, you might want th to be dragged too), how about create some div's in your each td, and simply drag the div to different column?

当你使用$(“#paid,#partially_paid,#youes”).sortable({你正在使他们的子元素可以排序时,结果是使每个td中的元素可以排序并且可以拖到每个元素中好像你允许将td拖到其他列,那么你可能需要计算每列中的tds数量并添加像rowspan这样的东西来使表看起来不是stange(另外,你也可能想要拖动它)如何在每个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>