jQueryUI 可排序 |在不同的父母之间拖动元素答案

【问题标题】：jQueryUI Sortable | Drag elements among different parentsjQueryUI 可排序 |在不同的父母之间拖动元素
【发布时间】：2013-07-11 14:51:39
【问题描述】：

真的可以吗？

这是我的简化版mockup。绿色行可以有多个单元格，并且必须是可拖动/可排序的。它们可以从上到下拖动到任何地方。红细胞总是留在原地，因为它们是日期。

这是我的code：

<table>
    <tr>
        <td>May 01</td>
        <td>
            <table>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>May 02</td>
        <td>
            <table>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>May 02</td>
        <td>
            <table>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

【问题讨论】：

1) 您的小提琴中没有任何脚本。 2) $('td td:first child').draggable(); 不会成功吗？ 无论如何，这绝对是可能的。该小部件允许您定义什么是可拖动的，什么是可以拖放的。
没有脚本，因为我不知道在那里写什么...只是$("tbody").sortable(); 无济于事，因为我的 trs 在不同的父母中。 Draggable 不起作用，因为它用于不同的目的。我需要我的行是可排序的。
如果您甚至不尝试，您可能不会得到太多帮助，抱歉。
好的，这是我的尝试 - jsfiddle.net/ruHPY/3 它可以满足我的要求，我只需要使用 'connectWith' 选项进行排序。但是有一个问题 - 如果只有一排并且我将它拖走，那么我无法在那个地方拖任何东西。显然它发生是因为该表中没有 tds，因此没有高度，所以没有地方可以拖动。我该如何解决这个问题？有什么建议吗？
是的 - 实际上在表格中添加标签，它工作得很好。

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

JSFIDDLE

HTML

<table>
    <tbody>
    <tr>
        <td>May 01</td>
        <td class="mt3">
            <table>
                <tr>
                    <td>1 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>May 02</td>
        <td class="mt3">
            <table>
                <tr>
                    <td>2 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>3 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>May 02</td>
        <td class="mt3">
            <table>
                <tr>
                    <td>4 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>5 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
                <tr>
                    <td>6 Some text</td>
                    <td>Some text</td>
                    <td>Some text</td>
                </tr>
            </table>
        </td>
    </tr>
    </tbody>
</table>

脚本

$(function() {
    $(".mt3 tbody").sortable({
            connectWith: ".mt3 tbody",
            start: function (event, ui) {
                    ui.item.toggleClass("highlight");
            },
            stop: function (event, ui) {
                    ui.item.toggleClass("highlight");
            }
        });
    $("td").disableSelection();
});

【讨论】：

不，这不好。这与我说的问题相同 - 尝试将第 1 行拖到某处，然后尝试将其拖回“5 月 1 日”。它不会去那里，因为 tbody 是空的并且没有高度。而且你不能为 tbody 设置高度。有什么想法吗？