ソート可能なブロックを作成するにはSortable.create()を使います。Sortable.create()は以下の書式になります。
Sortable.create(ID名, オプション)
ID名はソートするブロック（タグ）が含まれる親オブジェクト（親タグ）になります。オプションは、どのタグがソートの対象になるかなどを指定します。以下のサンプルでは番号付きリストの要素をドラッグしてソートすることができます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ソートする</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function()
{
Sortable.create("myList", { tag : "li" } );
}
// --></script>
</head>
<body>
<h1>scriptaculous.js ソートする</h1>
<ol
id="myList">
<li>テキストその１</li>
<li>テキストその２</li>
<li>テキストその３</li>
<li>テキストその４</li>
</ol>
</body>
</html>
別のオブジェクト間にある場合でもオプションを指定することでソートブロックをお互いのブロック間で移動させることができます。この場合、オプションでcontainmentを使い配列形式で、お互いのID名を指定します。片方のブロックだけ指定しても動作しないので必ず２つのオブジェクトでcontainmentを使いID名を指定する必要があります。以下のサンプルは２つの番号付きリストでli要素を自由にソートできるサンプルです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>他のオブジェクト間でソートする</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function()
{
Sortable.create("myList1", { tag : "li",
containment:["myList1","myList2"]} );
Sortable.create("myList2", { tag : "li",
containment:["myList1","myList2"]} );
}
// --></script>
</head>
<body>
<h1>scriptaculous.js 他のオブジェクト間でソートする</h1>
<ol id="myList1">
<li>テキストその１A</li>
<li>テキストその２A</li>
<li>テキストその３A</li>
<li>テキストその４A</li>
</ol>
<ol id="myList2">
<li>テキストその１B</li>
<li>テキストその２B</li>
<li>テキストその３B</li>
<li>テキストその４B</li>
</ol>
</body>
</html>
[
目次へ]
(2006.7.4)