エレメントのソート処理を指定する

書式

Sortable.create(element, option)

element : ページ上のエレメント
option : 以下のオプションを指定可能【省略可能】
 tag : ソート対象タグ名
 only : 指定されたスタイルシートが適用された項目のみソート対象
 overlap : 方向(horizontalまたはvertical)
 constraint : 移動方向制限(horizontal : 水平のみ、vertical : 垂直のみ)
 containment :
 handle : ハンドル(エレメント名を指定)
 hoverclass : 重なった場合のスタイルシートクラス名
 ghosting : ドラッグ前のエレメントを表示したままにするかどうか(true : する、false : しない)
 dropOnEmpty :
 scroll :
 scrollSensitivity :
 scrollSpeed : スクロール速度
 tree : 子ノードもソート対象にするか(true : する、false : しない)
 treeTag : ソート対象を内包するコンテナのタグ名
 onChange : ソートされ順序が変更された時の処理
 onUpdate : ソートされ順序が変更された後の処理

説明

 エレメントのソート処理を指定するにはSortable.create()を使います。最初のパラメータにソート対象となるエレメントを含むコンテナを指定します。2番目のオプションで、ソート処理の細かい指定を行います。

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</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");
Sortable.create("myList2",{ ghosting:true, dropOnEmpty:true });
Sortable.create("myList3", { tree:true });
}
// --></script>
</head>
<body>
<h1>入れ替える</h1>
<ul id="myList1">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ul id="myList2">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<ul id="myList3">
<li>項目1<ul><li>入れ子1</li><li>入れ子2</li><li>入れ子3</li></ul></li>
<li>項目2<ul><li>入れ子1</li><li>入れ子2</li><li>入れ子3</li></ul></li>
<li>項目3<ul><li>入れ子1</li><li>入れ子2</li><li>入れ子3</li></ul></li>
</ul>
</body>
</html>