jquery - jquery ui 可排序范围和嵌套可排序

Question

我的HTML：

<div class="demo">
    <div id="sortable" class="ui-state-default">
        <div id = "draggable1" class="">Home</div>
        <div id = "draggable2" class="">Contact Us</div>
        <div id = "draggable3" class="">
            <table id='srtTable'>
                <tr>
                    <td>tbl1</td>
                    <td>tbl2</td>
                    <td>tbl3</td>
                    <td>tbl4</td>
                </tr>
            </table>
            FAQs</div>
        <div id = "draggable5" class="Test">Test1</div>
        <div id = "draggable6" class="Test">Test2</div>
        <div id = "draggable7" class="Test">
             <table id='srtTable1'>
                <tr>
                    <td>tbl1</td>
                    <td>tbl2</td>
                    <td>tbl3</td>
                    <td>tbl4</td>
                </tr>
            </table>
            Test3</div>
    </div>
</div>

和jQuery：

$("#sortable").sortable({
   items: ":not(#draggable3,#draggable7)"
});

$("Table tr td").sortable({
   connectWith:'#' + $(this).parents().find(table).attr('id')
});

但是td在表外排序。如何限制td表内的排序范围？

jsfiddle

Answer 1

如果你用这个替换你所有的javascript代码，那应该可以工作：

$("#sortable table tr").sortable();

见小提琴：http: //jsfiddle.net/sP3UZ/2231/

您必须将 应用于sortable()可排序元素的容器，而不是元素本身。