Javascript

【Javascript】jQuery Sortablesでドラッグ&ソータブル

Javascript関連情報

更新日：2008年01月29日

jQuery Sortablesでドラッグ&ソータブル

高橋登史朗

今回は、リストの順序をドラッグドロップで変更できるソータブルをjQuery UI の Sortablesで試します。順序についての入力インターフェイスなどで便利に使えます。

サンプル

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

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

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！