Jquery Table Row Draggable and Sortable

Question

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 @ http://jsfiddle.net/fwjaj/. 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.

Code below

CSS

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

HTML

<div style="width: 98%">
   <div style="width: 45%">
      <table id="tblFiles" style="width: 100%" class="draggable">
         <thead>
            <tr>
               <td>
                  Current Files
               </td>
            </tr>
         </thead>
         <tbody>
            <tr id="1">
               <td>File 1</td>
            </tr>
            <tr id="2">
               <td>File 2</td>
            </tr>
            <tr id="3">
               <td>File 3</td>
            </tr>
            <tr id="4">
               <td>File 4</td>
            </tr>
            <tr id="5">
               <td>File 5
            </tr>
            <tr id="6">
               <td>File 6</td>
            </tr>
            <tr id="7">
               <td>File 7</td>
            </tr>
            <tr id="8">
               <td>File 8</td>
            </tr>
            <tr id="9">
               <td>File 9</td>
            </tr>
            <tr id="10">
               <td>File 10</td>
            </tr>
            <tr id="11">
               <td>File 11</td>
            </tr>
         </tbody>
      </table>
   </div>
   <div style="width: 45%; height: 300px; border:1px solid gray" id="divSelectedFiles">
      <table id="tblselectedFiles" style="width: 100%" class="draggable">
         <thead>
            <tr>
               <td>
                  Selected Files
               </td>
            </tr>
         </thead>
         <tbody>
         </tbody>
      </table>
   </div>
</div>

Jquery

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();
        }
    });
});

Maddy.

Answer 1

You could alternatively solve your problem like this :

jsFiddle

http://jsfiddle.net/Rusln/fwjaj/4/

JS

$("#current-files").sortable({
    connectWith: "#selected-files"
});
$("#selected-files").sortable();

$("#current-files li").dblclick(function(ev){
    $(this).prependTo("#selected-files");
});

HTML

<div>
<h3>Current Files</h3>
<ul id="current-files">
    <li>File 1</li>
    <li>File 2</li>
    …

</ul>
</div>

<div>
<h3>Selected Files</h3>
<ul id="selected-files"></ul>
</div>

CSS

…
li:nth-child(2n){
    background-color:#a6dbed;
}
…

Answer 2

This isn't necessarily the answer to "what is the right way to solve this," but I do see a problem in your code.

The line in the click handler:

$("#tblselectedFiles tbody").prepend(tr);

Is not the same as the line in the drag handler:

$("#tblselectedFiles tbody").prepend($cTr);

In the first one, tr references outerHTML, and in the second, $cTr references a jQuery object. If you convert the jQuery object into the same kind of object like this:

$cTr[0].outerHTML

it will work. I tested it in your jsFiddle.

As for why this is true, I'll have to do some more thinking on this.

EDIT: I figured it out. When you prepend the jQuery object as opposed to the String, it still has the draggable property attached to it. You can remove this by calling

$cTr.draggable("destroy");