title: Drag and Drop Table - moving cells to different columns
body: <p>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.</p>
  
  <p>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?</p>
  
  <pre><code>&lt;script&gt;
        $(function() {
          $( "#paid, #partially_paid, #owes" ).sortable({
            connectWith: ".tdPayment"
          }).disableSelection();
        });
  &lt;/script&gt;
  </code></pre>
  
  <p>Table</p>
  
  <pre><code>&lt;table class="paymentTable" id="dragTable"&gt;
      &lt;tr&gt;
          &lt;th class="thPayment"&gt;Paid&lt;/th&gt;
          &lt;th class="thPayment"&gt;Partially Paid&lt;/th&gt;
          &lt;th class="thPayment"&gt;Owes&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="tdPayment" id="paid"&gt;
          &lt;?php
              if ($paid_name == true) {
                  echo $paid_name;
              } else {
                  echo "No one has paid";
              }
          ?&gt;
          &lt;/td&gt;
          &lt;td class="tdPayment" id="partially_paid"&gt;
          &lt;?php 
              if ($partially_paid__name == true) {
                  echo $partially_paid__name . " - " . $partially_paid_amount;
              } else {
                  echo "No one has made a partial payment";
              }
          ?&gt;  
          &lt;/td&gt;
          &lt;td class="tdPayment" id="owes"&gt;
          &lt;?php
              if ($owes_name == true) {
                  echo $owes_name;
              } else {
                  echo "Everyone has paid something";
              }
          ?&gt;  
          &lt;/td&gt;
      &lt;/tr&gt;   
  &lt;/table&gt;
  </code></pre>
  
  <p>UPDATE WITH ADDED IN DIV</p>
  
  <pre><code>&lt;table class="paymentTable" id="dragTable"&gt;
          &lt;tr&gt;
              &lt;th class="thPayment"&gt;Paid&lt;/th&gt;
              &lt;th class="thPayment"&gt;Partially Paid&lt;/th&gt;
              &lt;th class="thPayment"&gt;Owes&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="tdPayment" id="paid"&gt;
                              &lt;div&gt;
              &lt;?php
                  if ($paid_name == true) {
                      echo $paid_name;
                  } else {
                      echo "No one has paid";
                  }
              ?&gt;
                              &lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="tdPayment" id="partially_paid"&gt;
              &lt;div&gt;
              &lt;?php 
                  if ($partially_paid__name == true) {
                      echo $partially_paid__name . " - " . $partially_paid_amount;
                  } else {
                      echo "No one has made a partial payment";
                  }
              ?&gt;  
              &lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="tdPayment" id="owes"&gt;
              &lt;div&gt;
              &lt;?php
                  if ($owes_name == true) {
                      echo $owes_name;
                  } else {
                      echo "Everyone has paid something";
                  }
              ?&gt;  
              &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>