Jquery 表格行可拖动和可排序

Question

我正在尝试在 2 个表之间提供可拖动和可排序的功能。我提供了两种方法，用户可以选择文件，他可以拖放文件，也可以双击文件，它将被添加到所选列表中。示例代码是@http://jsfiddle.net/fwjaj/。我遇到的问题是，当我双击并添加文件时，我可以在选定的文件表中对它们进行排序，但是当我拖放它们时，我无法做到这一点。我在这里想念什么？非常感谢任何帮助。非常感谢您的帮助。

代码如下

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

麦迪。

Answer 1

你也可以这样解决你的问题：

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

这不一定是“解决此问题的正确方法是什么”的答案，但我确实在您的代码中看到了问题。

点击处理程序中的行：

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

与拖动处理程序中的行不一样：

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

在第一个中，tr 引用 outerHTML，在第二个中，$cTr 引用一个 jQuery 对象。如果你把 jQuery 对象转换成类似这样的对象：

$cTr[0].outerHTML

它会起作用的。我在您的 jsFiddle 中对其进行了测试。

至于为什么这是真的，我得再思考一下。

编辑：我想通了。当您预先添加 jQuery 对象而不是字符串时，它仍然具有附加的可拖动属性。您可以通过调用删除它

$cTr.draggable("destroy");