如何使用jQuery UI将Sortable行附加到另一个选项卡中的表？

w8rqjzmb 于 2024-01-07 发布在 jQuery

关注(0)|答案(1)|浏览(170)

我有一个带有jquery-ui标签的页面，每个标签包含一个表，我把标签设置为可删除的，表设置为可排序的。
我希望能够从活动选项卡内的表中拖动一行，放在不同的选项卡上，并将该行附加到该选项卡中包含的表中。
以下是我的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元素在tab表的最后一行之后追加：

$(tabdiv + " table tr:last").after(ui.draggable);

型
相反，如果我自己用<tr>标记构建行，并使用ui.draggable的html，如下所示：

$(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");

型
那么它就像预期的那样工作，如这个分叉的JSFiddle所示。
这样做的问题是，我丢失了附加到原始行的任何类或数据信息。
有没有人能告诉我如何追加被拖动的行元素？（顺便说一句，我是jquery的新手，所以如果这是一些基本的东西，我很抱歉。）

jquery

来源：https://stackoverflow.com/questions/22853614/how-do-i-append-a-sortable-row-to-a-table-in-another-tab-using-jquery-ui

1条答案

按热度按时间

pgky5nke1#

可以使用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>

展开查看全部

赞(0）回复(0）举报 2024-01-07

我来回答

如何使用jQuery UI将Sortable行附加到另一个选项卡中的表？

1条答案

相关问题

热门标签

最新问答