Question

my 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>

and jquery:

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

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

But td are sorting outside of table.How to limit td sorting scope inside a table?

jsfiddle

Answer 1

If you replace all your javascript code with this, that should work :

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

See the fiddle: http://jsfiddle.net/sP3UZ/2231/

You have to apply the sortable() to the container of the sortable elements, not to the elements themselves.