Jquery 表格行可拖动和可排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18973986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Table Row Draggable and Sortable
提问by user1181458
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.
我试图在 2 个表之间提供可拖动和可排序的功能。我提供了两种方法，用户可以选择文件，他可以拖放文件，也可以双击文件，然后将其添加到选定的列表中。示例代码是@ http://jsfiddle.net/fwjaj/。我遇到的问题是，当我双击并添加文件时，我可以在所选文件表中对它们进行排序，但是当我拖放它们时，我无法这样做。我在这里缺少什么？任何帮助都受到高度赞赏。非常感谢你的帮助。
Code below
下面的代码
CSS
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
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.
麦迪。
回答by rusln
You could alternatively solve your problem like this :
您也可以像这样解决您的问题：
jsFiddle
js小提琴
http://jsfiddle.net/Rusln/fwjaj/4/
http://jsfiddle.net/Rusln/fwjaj/4/
JS
JS
$("#current-files").sortable({
connectWith: "#selected-files"
});
$("#selected-files").sortable();
$("#current-files li").dblclick(function(ev){
$(this).prependTo("#selected-files");
});
HTML
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
CSS
…
li:nth-child(2n){
background-color:#a6dbed;
}
…
回答by howrad
This isn't necessarily the answer to "what is the rightway 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, trreferences outerHTML, and in the second, $cTrreferences a jQuery object. If you convert the jQuery object into the same kind of object like this:
在第一个中，tr引用了 outerHTML，在第二个中，$cTr引用了一个 jQuery 对象。如果您将 jQuery 对象转换为相同类型的对象，如下所示：
$cTr[0].outerHTML
it will work. I tested it in your jsFiddle.
它会起作用。我在您的 jsFiddle 中对其进行了测试。
As for whythis 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
编辑：我想通了。当您在前面添加 jQuery 对象而不是 String 时，它仍然具有附加的draggable 属性。您可以通过调用删除它
$cTr.draggable("destroy");
