※ ChatGPTを利用し、要約された質問です（原文：jqueryのsortableで行き来自由に）
jqueryのsortableで行き来自由に
このQ&Aのポイント
jqueryのsortableを使用して要素を自由に移動する方法について教えてください。
sortableのconnectWithを使用すると、要素を別のエリアに移動することができますが、もとの場所に戻すことができなくなる問題があります。
この問題を解決するための対策方法を教えてください。
お世話になります
jqueryのsortableでconnectWithを使うことで
別のエリアにソートが可能になりますが
すべての要素を別の要素に移動した場合
もとの場所に戻すことが不可能になってしまいます
これを可能にするにはどうしたらいいのでしょうか
例として以下のソース
AエリアからBエリアに「a」「b」を移動させた後に
BエリアからAエリアに戻そうとしても、移動できなくなってしまいます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>connectWith</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sortable table tbody").sortable({
connectWith:'#sortable table tbody'
}).disableSelection();
});
</script>
</head>
<body>
<div id="sortable">
<!-- エリア A 始まり -->
<table width="100%" border="1" cellspacing="10" cellpadding="10">
<thead>
<tr>
<th>タイトル エリアA（ここは動かしたくない）</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
</tbody>
</table>
<!-- エリア A 終わり -->
<!-- エリア B 始まり -->
<table width="100%" border="1" cellspacing="10" cellpadding="10">
<thead>
<tr>
<th>タイトル エリアB（ここは動かしたくない）</th>
</tr>
</thead>
<tbody>
<tr>
<td>c</td>
</tr>
<tr>
<td>d</td>
</tr>
</tbody>
</table>
<!-- エリア B 終わり -->
</div>
</body>
</html>
対策方法御存知の方
お助け下さいませ！
お礼
kool_noah様ご回答ありがとうございます！ これはjqueryのバグなのか、そもそもtableでconnectWithすることが非推奨なのか お教えいただいたとおり、ダミーを入れてcancelで動かないようにしました！ ご回答ありがとうございます！