title: Jquery Table Row Draggable and Sortable
body: <p>I am trying to provide both draggable and sortable function between 2 tables. I have provided 2 method which user can select files he can either drag and drop the files or he can double click the file and it will be added to the selected list. sample code is @ <a href="http://jsfiddle.net/fwjaj/" rel="nofollow">http://jsfiddle.net/fwjaj/</a>. The issue I have is that when I double click and add the files I am able to sort them in the selected files table but when I drag and drop them I am unable to do it. What am I missing here? Any help is highly appreciated. Thanks a lot for your help.</p>
  
  <p>Code below</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div {
      float: left;
      margin-left: 5px;
  }
  
  .draggable tbody td {
      padding: 2px;
      border: 1px solid black;
  }
  
  .draggable thead td {
      padding: 1px;
      border-bottom: 1px solid black;
      font-weight: bold;
  }
  
  tr.even {
      background-color: white;
  }
  
  tr.odd {
      background-color: #a6dbed;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div style="width: 98%"&gt;
     &lt;div style="width: 45%"&gt;
        &lt;table id="tblFiles" style="width: 100%" class="draggable"&gt;
           &lt;thead&gt;
              &lt;tr&gt;
                 &lt;td&gt;
                    Current Files
                 &lt;/td&gt;
              &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tbody&gt;
              &lt;tr id="1"&gt;
                 &lt;td&gt;File 1&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="2"&gt;
                 &lt;td&gt;File 2&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="3"&gt;
                 &lt;td&gt;File 3&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="4"&gt;
                 &lt;td&gt;File 4&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="5"&gt;
                 &lt;td&gt;File 5
              &lt;/tr&gt;
              &lt;tr id="6"&gt;
                 &lt;td&gt;File 6&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="7"&gt;
                 &lt;td&gt;File 7&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="8"&gt;
                 &lt;td&gt;File 8&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="9"&gt;
                 &lt;td&gt;File 9&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="10"&gt;
                 &lt;td&gt;File 10&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="11"&gt;
                 &lt;td&gt;File 11&lt;/td&gt;
              &lt;/tr&gt;
           &lt;/tbody&gt;
        &lt;/table&gt;
     &lt;/div&gt;
     &lt;div style="width: 45%; height: 300px; border:1px solid gray" id="divSelectedFiles"&gt;
        &lt;table id="tblselectedFiles" style="width: 100%" class="draggable"&gt;
           &lt;thead&gt;
              &lt;tr&gt;
                 &lt;td&gt;
                    Selected Files
                 &lt;/td&gt;
              &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tbody&gt;
           &lt;/tbody&gt;
        &lt;/table&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>function refreshTables() {
      $('#tblselectedFiles tbody,#tblFiles tbody').each(function () {
          $('tr:odd', this).addClass('odd').removeClass('even');
          $('tr:even', this).addClass('even').removeClass('odd');
      });
  }
  $(document).ready(function () {
      var c = {};
      refreshTables();
      $('#tblFiles tr').dblclick(function () {
          var tr = this.outerHTML;
          $(tr).addClass("selectedFiles");
          $("#tblselectedFiles tbody").prepend(tr);
          $(this).remove();
          $("#tblselectedFiles tbody tr").eq(0).effect('highlight', {}, 3000);
          refreshTables();
      });
      $("#tblFiles tr").draggable({
          //connectToSortable: '#tblselectedFiles tbody',
          helper: "original",
          start: function (event, ui) {
              c.tr = this;
              c.helper = ui.helper;
          }
      });
      var fixHelper = function (e, ui) {
          ui.children().each(function () {
              $(this).width($(this).width());
          });
          return ui;
      };
      $("#tblselectedFiles tbody").sortable({
          helper: fixHelper
      });
      $("#tblselectedFiles tbody").disableSelection();
      $("#divSelectedFiles").droppable({
          drop: function (event, ui) {
              var $cTr = $(ui.draggable);
              $cTr.css("left", "");
              $cTr.css("top", "");
              if ($cTr.hasClass("selectedFiles"))
                  return;
              $cTr.addClass("selectedFiles");
              $("#tblselectedFiles tbody").prepend($cTr);
              $cTr.effect('highlight', {}, 3000);
              refreshTables();
          }
      });
  });
  </code></pre>
  
  <p>Maddy.</p>