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

本文介绍了拖放表 - 将单元格移动到不同的列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图做一个拖放表。我在JQuery在他们的网站上演示了我的代码后，我不能让我的工作。我也不知道我在做什么是对我最好的选择。

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

 < script> 
 $（function（）{
 $（#paid，#partially_paid，#owes）.sortable（{
 connectWith：.tdPayment
}）。disableSelection ）; 
}）; 
< / script>

表

 < table class =paymentTableid =dragTable> 
< tr> 
< th class =thPayment>付费< / th> 
< th class =thPayment>部分付款< / th> 
< th class =thPayment> Owes< / th> 
< / tr> 
< tr> 
< td class =tdPaymentid =paid> 
<？php 
 if（$ paid_name == true）{
 echo $ paid_name; 
} else {
 echo没有人付款; 
} 
？> 
< / td> 
< td class =tdPaymentid =partial_paid> 
<？php 
 if（$ partial_paid__name == true）{
 echo $ partial_paid__name。  - 。 $ partially_paid_amount; 
} else {
 echo没有人做出部分付款; 
} 
？> 
< / td> 
< td class =tdPaymentid =owes> 
<？php 
 if（$ owes_name == true）{
 echo $ owes_name; 
} else {
 echo每个人都付了点东西; 
} 
？> 
< / td> 
< / tr> 
< / table>

已添加DIV的更新

 < table class =paymentTableid =dragTable> 
< tr> 
< th class =thPayment>付费< / th> 
< th class =thPayment>部分付款< / th> 
< th class =thPayment> Owes< / th> 
< / tr> 
< tr> 
< td class =tdPaymentid =paid> 
< div> 
<？php 
 if（$ paid_name == true）{
 echo $ paid_name; 
} else {
 echo没有人付款; 
} 
？> 
< / div> 
< / td> 
< td class =tdPaymentid =partial_paid> 
< div> 
<？php 
 if（$ partial_paid__name == true）{
 echo $ partial_paid__name。  - 。 $ partially_paid_amount; 
} else {
 echo没有人做出部分付款; 
} 
？> 
< / div> 
< / td> 
< td class =tdPaymentid =owes> 
< div> 
<？php 
 if（$ owes_name == true）{
 echo $ owes_name; 
} else {
 echo每个人都付了点东西; 
} 
？> 
< / div> 
< / td> 
< / tr> 
< / table>

解决方案

当您使用 $ #paid，#partially_paid，#owes）.sortable（{你正在使他们的子元素可排序，所以，结果是使每个元素 td 可排序，可以相互拖动
如果允许将 td 拖动到其他列，那么您可能会要计算每列中的$ code> td ，并添加一些类似 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}）。 }，}）。disableSelection（）; }）;

  table {border：solid 1px＃000; } th，td {width：100px; margin：0px auto;} div {background-color：＃0cc;边距：1px自动; 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 =stylesheethref =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 =paymentTableid =dragTable> < TR> < th class =thPayment> Paid< / th> < th class =thPayment>部分付费< / th> < th class =thPayment> Owes< / th> < / TR> < TR> < td class =tdPaymentid =paid> < div> A< / div> < DIV> B< / div> < DIV> C< / div> < / TD> < td class =tdPaymentid =partial_paid> < DIV> D< / div> < DIV> E< / div> < DIV> F< / div> < / TD> < td class =tdPaymentid =owes> < DIV> G< / div> < DIV> H< / div> < DIV> I< / div> < / TD> < / TR> < / table>

I am attempting to make a drag and drop table. I was modeling 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.

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

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

解决方案

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?

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

这篇关于拖放表 - 将单元格移动到不同的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！