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对象而不是String时，它仍然附加了draggable属性。您可以通过调用

删除它

$cTr.draggable("destroy");

Jquery表行可拖动和可排序

2 个答案: