

tableタグで作成した表内で、移動を制限したいと思っています。  
表の最上部と最下部を「対象外（ハンドルなし）」にはできます。  
しかし、他の要素を「最上部より上」「最下部より下」に移動できてしまいます。  
この動きを抑制する方法はあるでしょうか？  
よろしくお願いします。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Sortable test</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
        <script>
            $(function(){
                $( "tbody" ).sortable({
                    placeholder: "ui-state-highlight",
                    axis: "y",
                    handle: ".sortableHandle"
                });
                $( ".sortableHandle" ).disableSelection();
            });
        </script>
        <style>
            td {border: 1px solid #ccc;padding:5px}
        </style>
    </head>
    <body>
    <table>
        <tbody>
        <tr>
            <th>ハンドル</th>
            <th>内容</th>
        </tr>
    
        <tr class="">
            <td class="sortableHandle">■</td>
            <td>要素1</td>
        </tr>
        <tr>
            <td class="sortableHandle">■</td>
            <td>要素2</td>
        </tr>
        <tr>
            <td class="sortableHandle">■</td>
            <td>要素3</td>
        </tr>
        <tr>
            <td class="sortableHandle">■</td>
            <td>要素4</td>
        </tr>
        <tr>
            <td class="sortableHandle">■</td>
            <td>要素5</td>
        </tr>
        <tr>
            <td colspan="2">最後の要素</td>
        </tr>
        </tbody>
    </table>
    
    </body>
    </html>
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/S3xHB.png)](https://i.stack.imgur.com/S3xHB.png)


CC BY-SA 4.0
2022-06-30T06:32:28.920
89683
2022-10-23T21:26:43.490
7980
question
jquery jquery-ui
jQuery UI Sortable で移動範囲を指定したい


tbodyに対してsortableを指定しているので、theadとtfootタグを用意してそれぞれヘッダーとフッターを定義すれば、tbodyの中だけで移動ができるようになります。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Sortable test</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
        <script>
            $(function(){
                $( "tbody" ).sortable({
                    placeholder: "ui-state-highlight",
                    axis: "y",
                    handle: ".sortableHandle"
                });
                $( ".sortableHandle" ).disableSelection();
            });
        </script>
        <style>
            td {border: 1px solid #ccc;padding:5px}
        </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
                <th>ハンドル</th>
                <th>内容</th>
            </tr>
        </thead>
        <tbody>
        <tr class="">
            <td class="sortableHandle">■</td>
            <td>要素1</td>
        </tr>
        <tr>
            <td class="sortableHandle">■</td>
            <td>要素2</td>
        </tr>
        <tr>
            <td class="sortableHandle">■</td>
            <td>要素3</td>
        </tr>
        <tr>
            <td class="sortableHandle">■</td>
            <td>要素4</td>
        </tr>
        <tr>
            <td class="sortableHandle">■</td>
            <td>要素5</td>
        </tr>
        <tfoot>
            <tr>
                <td colspan="2">最後の要素</td>
            </tr>
        </tfoot>
        </tbody>
    </table>
    
    </body>
    </html>
[/code]


CC BY-SA 4.0
2022-10-23T21:26:43.490
91774
2022-10-23T21:26:43.490
54991
89683
answer