如何使用jQuery UI将可排序行附加到另一个选项卡中的表中？
如何使用jQuery UI将可排序行附加到另一个选项卡中的表中？
提问于 2014-04-04 04:29:52
我有一个带有jquery选项卡的页面，每个选项卡都包含一个表。我将选项卡设置为可下垂，将表设置为可排序。
我希望能够从active选项卡中的表中拖动一行，将其放到另一个选项卡上，并将该行附加到该选项卡中包含的表中。
这是我的JS：
$("#tabs").tabs();
$("tbody").sortable({
items: "> tr:not(:first)",
appendTo: "parent",
helper: "clone"
}).disableSelection();
$("#tabs ul li a").droppable({
hoverClass: "drophover",
tolerance: "pointer",
drop: function(e, ui) {
var tabdiv = $(this).attr("href");
$(tabdiv + " table tr:last").after(ui.draggable);
ui.draggable.remove();
}
});正如您在这个JSFiddle中看到的那样，行是可拖动的，但是将它们放在另一个选项卡上并不会将其附加到其中的表中。
问题似乎是我试图使用ui.draggable jquery元素在选项卡的最后一行之后追加：
$(tabdiv + " table tr:last").after(ui.draggable);相反，如果我使用<tr>标记构建行并使用ui.draggable的html，如下所示：
$(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");然后，它按照预期的方式工作，如这个分叉式JSFiddle中所示。
这样做的问题是，我丢失了附加到原始行的任何类或数据信息。
有人能让我明白如何附加被拖动的row元素吗？(顺便说一句，我是jquery的新手，所以如果这是一些基本的东西，我很抱歉。)
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-28 12:32:23
可以使用clone()方法追加当前元素的克隆，包括数据和事件处理程序，如下所示：
$("#tabs").tabs();
$("tbody").sortable({
items: "> tr:not(:first)",
appendTo: "parent",
helper: "clone"
}).disableSelection();
$("#tabs ul li a").droppable({
hoverClass: "drophover",
tolerance: "pointer",
drop: function (e, ui) {
var tabdiv = $(this).attr("href");
$(tabdiv + " table").append(ui.draggable.clone(true).show());
ui.draggable.remove();
}
});table {
border-collapse:collapse;
}
table tr td {
border: 1px solid red;
padding:2px 15px 2px 15px;
width:50px;
}
#tabs ul li.drophover {
color:green;
}<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#current"><span>Current</span></a>
</li>
<li><a href="#archive"><span>Archive</span></a>
</li>
<li><a href="#future"><span>Future</span></a>
</li>
</ul>
<div id="current">
<div id="table1">
<table>
<tbody>
<tr>
<td>COL0</td>
<td>COL1</td>
<td>COL2</td>
</tr>
<tr>
<td>c00</td>
<td>c01</td>
<td>c02</td>
</tr>
<tr>
<td>c10</td>
<td>c11</td>
<td>c12</td>
</tr>
<tr>
<td>c20</td>
<td>c21</td>
<td>c22</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="archive">
<div id="table2">
<table>
<tbody>
<tr>
<td>COL0</td>
<td>COL1</td>
<td>COL2</td>
</tr>
<tr>
<td>a00</td>
<td>a01</td>
<td>a02</td>
</tr>
<tr>
<td>a10</td>
<td>a11</td>
<td>a12</td>
</tr>
<tr>
<td>a20</td>
<td>a21</td>
<td>a22</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="future">
<div id="table3">
<table>
<tbody>
<tr>
<td>COL0</td>
<td>COL1</td>
<td>COL2</td>
</tr>
<tr>
<td>f00</td>
<td>f01</td>
<td>f02</td>
</tr>
<tr>
<td>f10</td>
<td>f11</td>
<td>f12</td>
</tr>
<tr>
<td>f20</td>
<td>f21</td>
<td>f22</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22853614
复制相关文章
相似问题
腾讯云开发者
