サンプル
ソータブルの簡単なサンプルを試してみます。いくつかのアイテムをドラッグして順序を変更すると、それを記録して出力します。このデータをAjaxなどで、サーバーやクッキーへ記録することで、たとえば、順序に関する設定などの入力を、視覚的に実行することができるようになります。 Sortablesも、引数のオプションでいろいろ設定できますので、最新のものはOptionsや UI/Sortablesあるいは、 デモ などでご参照ください。
- アイテム 1
- アイテム 2
- アイテム 3
- アイテム 4
ここへ並べ替えた順番を出力します
ソースは次のとおり
<style type="text/css">
#myList li{
width : 100px ;
height : 10px ;
padding : 10px ;
margin : 2px ;
background-color : #B9FF04 ;
list-style : none ;
cursor : move ;
}
#viewSortlist{
width : 400px ;
height : 20px ;
padding : 10px ;
background-color : #eee ;
z-index:100;
}
</style>
<ul id="myList">
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
<li>アイテム 4</li>
</ul>
<div id="viewSortlist">ここへ並べ替えた順番を出力します</div>
<script type="text/javascript">
jQuery.noConflict(); //他のライブラリとの衝突を回避します
jQuery(function($) {
//sortableオプション
var option={
start : function(){
$('#viewSortlist').css("background-color","#ccc");
},
stop : function(){
var data=[];
$("li","#myList").each(function(i,v){
data.push(v.innerHTML);
});
$('#viewSortlist').html(data.toString())
.css("background-color","#eee");
}
};
//sortable実行
$("#myList").sortable(option);
});
</script>
