LotosLabo

プログラミング技術とか気になった情報を載せていきます

jQuery UIについて2

ドロップを使う


基本的にある要素を他の要素にドラッグアンドドロップした時に発生させます。


droppable

今回はボックスを二つほど用意します。

例:

<body>
<div id="box" style="width:100px; height:100px; background:green;">
<div id="t_box" style="width:100px; height:100px; background:blue;">
</body>






例:

$(function() {
          $('#box').draggable();
          $('#t_box').droppable({
          accept:'#box',
          drop:function(){
              alert("ドロップされました");
          }
         });
    });




ドロップするとアラートが表示される。
なお、重なりは50%以上になったら重なったと判断される。

ちなみにこの重なりをオプションで変更することが出来る。

tolerance: 'fit' とするとぴったりフィットすると重なったと判断される。

ドラッグを複製させて追加

helper: 'clone'

例:

<body>
<div id="box" style="width:100px; height:100px; background:green;"></div>
    <div id="t_box" style="width:100px; height:100px; background:blue;"></div>
    <div id="empty" style="widht:100px; height:100px;"></div>
<script>
$(function() {
	$('#box').draggable({
		helper: 'clone'
	});
	$('#t_box').droppable({
		accept:'#box',
		drop:function(event,ui){
			ui.draggable.clone().appendTo('#empty');
		}
	});
	});
</script>


新たに青ボックスの下に空の要素を追加しました。
緑ボックスをドラッグして、青ボックスにドロップすると青ボックスの下に複製されて追加されます。

要素のサイズを変更可能にする

Resizable

例:

<body>
<div id="box" style="width:100px; height:100px; background:green;"></div>
<script>
$(function() {
        $('#box').draggable().resizable({
             handles: 'all'
       });
});
</script>
</body>



ここで handles: 'all'と指定することですべての場所でサイズが変更可能になる。

縦横比を保ったままサイズ変更

asspectRatio:true

例:

$(function() {
        $('#box').draggable().resizable({
             handles: 'all',
                 asspectRatio:true,
                 stop:function(event,ui){
                 console.log(ui.size.height,ui.size.width);
       }
       });
});



また、縦横比を保ったままだけでなく、リサイズを止めた時に要素のサイズを
コンソールにより出力させた。

コンソールはF12で見ることが出来ます。

複数の要素を選択可能にする

Selectable

まず、リストを用意します。

例:

<style>
.ui-selected {
	backghround: red;
}
</style>

<body>
<ul id="selectable">
<li id="item_1">item1</li>
<li id="item_2">item2</li>
<li id="item_3">item3</li>
<li id="item_4">item4</li>
<li id="item_5">item5</li>
</ul>
</body>



スクリプト

例:

<script>
$(function(){
	$('#selectable').selectable();
});
</script>



このようにすると選択することができ、選択したところが赤色になります。

また、これをちょこっと応用したものを紹介します。
コンソール画面にて、選択したものを分かりやすいように要素を出力しました。


例:

<script>
$(function(){
	var selected = new Array();
	$('#selectable').selectable({
	selected: function(event,ui){
	if (selected.indexOf(ui.selected.id) == -1){
	selected.push(ui.selected.id);
	console.log(selected);
}
	},

unselected: function(event,ui) {
	var id = ui.unselected.id;
	selected.splice(selected.indexOf(id),1)
	console.log(selected);
}
});
});
</script>



このようにすることでコンソール画面でどれを選んだのか、どれを解除したのかがわかると思います。

var selected = new Array() にて配列を作成します。
そして選択した時に、選択したものが重複しないように条件分岐をつけて、
選択したらpushで配列に入れるようにしています。

unselectedというのは解除した時のものです。


要素の並び替え

Sortable

まず先ほどと同じようにリストを作成します。

例:

<body>
<ul id="sortable">
<li id="item_1">item1</li>
<li id="itme_2">item2</li>
<li id="itme_3">item3</li>
<li id="itme_4">item4</li>
<li id="itme_5">item5</li>
</ul>
</body>



例:

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



リストをドラッグしてドロップすることで並び替えすることが出来ます。

また、これを応用してコンソール画面にて並び替えたリストの要素を取得しました。

例:

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



serialize というのを使って要素を取得しています。
なお、これはリストの番号がアイテム名+アンダバー+連番になってないと使えない。