Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQuery UI Sortable

jQuery UI

今回は、jQuery UIの「Sortable」について書きます。


Sortableは、ドラッグ＆ドロップで要素を並び替えることができます。

このように使います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery ui</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

	<ul id="sortable">
	<li id="a_1">sortable1</li>
	<li id="a_2">sortable2</li>
	<li id="a_3">sortable3</li>
	<li id="a_4">sortable4</li>
	<li id="a_5">sortable5</li>
	</ul>

<script>
$(function(){
	$('#sortable').sortable();	
});
</script>
</body>
</html>

実行結果↓
f:id:gupuru:20140213225006p:plain


「.sortable();」とすると、並び替えることができます。

$(function(){
	$('#sortable').sortable();	
});


Sortableには、他にも機能があります。

①
「cursor:'move',」とすると、ドラッグしている時のカーソルの画像が変わります。

②
「opacity:0.5」とすると、ドラッグしている要素が半透明になります。

①，②のコード例↓

$(function(){
	$('#sortable').sortable({
		cursor:'move',
		opacity:0.5
	});
});

③
「update」とするとイベントが発生したときの処理ができます。

$(function(){
	$('#sortable').sortable({
		cursor:'move',
		opacity:0.5,
		update: function(event,ui){
			console.log($(this).sortable("serialize"));
		}
	});
});

「serialize」とすると、ドラッグ＆ドロップ後の「要素の並び」のデータを取得できます。
上のコードでは、コンソールに並びのデータを表示しています。