jQuery Sortablesでドラッグ&ソータブル(2ページ目)

サンプル

ソータブルの簡単なサンプルを試してみます。いくつかのアイテムをドラッグして順序を変更すると、それを記録して出力します。

このデータを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>