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>