サンプル

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

このデータをAjaxなどで、サーバーやクッキーへ記録することで、たとえば、順序に関する設定などの入力を、視覚的に実行することができるようになります。 Sortablesも、引数のオプションでいろいろ設定できますので、最新のものはOptionsUI/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>




※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。