0

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

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

画像の説明をここに入力

2
  • ここでいう「移動を抑制する」とは「ドラッグドロップすらできないようにする」ですか?それともドラッグドロップできるけど、ドラッグドロップした後に、アラートやメッセージで移動できませんというような形でも問題ないですか?
    – keitaro_so
    Commented 2022年7月6日 0:17
  • 可能であれば、ドラッグ中に「ハンドル内容」と「最後の要素」の間だけ移動でき瑠葉にしたいです。あるいは、上記のように移動した後(ドロップ)に自動的に内側に戻るというのも良いと思っています
    – light
    Commented 2022年7月7日 3:15

1 件の回答 1

0

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。