次のコードがあります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<style>
#sortable{ list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#sortable li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; width: 250px; }
.wrp {font-size:12px;}
#sortable {background:red;}
</style>
<body>
<div class="wrp">
<ol id="sortable" class="connectedSortable">
<li id="0"><div>Start</div>
<li id="1"><div>TOC</div>
</li>
<li id="2">
<div>Category1</div>
<ol id="category" class="category">
<li id="3"><div>Sub-category1.1</div>
</li><li id="4" ><div>Sub-category1.2</div>
<ol id="sub_category" class="sub_category">
<li id="5" class="item">Item1.2.1</li>
<li id="6" class="item">Item1.2.2</li>
</ol>
</li><li id="7"><div>Sub-category1.3</div>
</li><li id="8"><div>Sub-category1.4</div>
</li>
</ol>
</li>
</li></ol>
</div>
</body>
<script>
$(function() {
$( "#sortable" ).sortable({
connectWith: ".connectedSortable"
});
$( "#category" ).sortable();
$( "#sub_category" ).sortable({
connectWith: ".category"
});
});
</script>
現在、私はできる：
- カテゴリを同じレベルに移動する
- サブカテゴリを移動
- カテゴリまたはサブカテゴリを移動すると、そのすべてのアイテムが一緒に移動されます。
- 同じレベルでアイテムを移動する
トリックを教えてもらえますか？次のようなコードを変更するにはどうすればよいですか? - 項目を他のカテゴリに移動できますか? 例：
移動できitem1.2.1ますsub-category1.1
前もって感謝します。