ドットインストール様がとてもまとまったレッスンを提供してくださっていたので、しばらくこちらでお勉強させていただくことにしました。
また、単純にメソッドチェーンするだけではSelectableとSortableは同時に利用できません。でもどうしても同時に使いたい！ という時のために、Selectableのオプションを使って実現してみました。
スタイルはいつも通り適当に。
- item 1
- item 2
- item 3
- item 4
- item 5
- item 6
公式サイトの例では、selectable()を設定しているだけなのですが、ここではui.selectable.idを取ってちょっとお試しソースが追加されています。
このui.selectedなんですが、idとclass以外には何が取れるのか、ちょっと分かりませんでした。もう少し公式ドキュメントを探ってみたいと思います。
Selectableの便利なところは、自動的にui-selectingやui-selectedというクラスが追加される部分です。こちらに色などを指定すれば、選択されている時、あるいは選択された後を表現するための視覚効果が簡単に得られますね。
Sortableの方は、ドットインストール様が実装されていたupdateメソッドも使ってあります。これの注意点は、id名に"_1"などのアンダースコアと数字がついた名前をつけなければならないという点です。
さて、このSelectableとSortableの同時実装についてですが、まずは内部にhandleクラスを実装します。ここからのポイントは二つです。
①Selectable
handleクラスの部分では、canselオプションで機能を停止します。
②Sortable
handleクラスの部分だけ"handle"オプションをつけて有効化します。
やっていることは、draggableの範囲指定と似ていますね。
仕上げとして、リストのそれぞれにはJQueryのfindを利用し、まずは適当なクラスを追加します。その先頭にprependで新しいdivを挿入します。ここにhandleクラスを含めてあります。これで数が多くなっても後から楽ちんです。この辺りはJQueryの基本的な動作ですね！
ついでにちょっと分かりやすいようにhandle部分にCaratもつけてあります。これはJQueryが用意してくれているアイコンです。細かい位置などをCSSで直して出来上がり！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>JQuery UI Selectable</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
.ui-selecting{
background-color: rgba(93, 221, 170, 0.1);
}
.ui-selected{
background-color: rgba(93, 221, 170, 0.5);
}
.ui-selected .handle{
background-color: rgba(230, 255, 101, 0.5);
}
#select_sortable{
list-style: none;
}
#select_sortable > li{
font-size: 20px;
position: relative;
padding-left: 30px;
border: solid 1px;
margin-bottom: 4px;
font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
height: 30px;
width: 300px;
}
li .handle{
position: absolute;
top: 0; bottom: 0; left: 0;
background-color: rgba(230, 255, 101, 0.5);
width: 25px;
height: 30px;
}
.carat{
margin-top: 30%;
margin-left: 5px;
}
</style>
</head>
<body>
<ul id="select_sortable">
<li id="item_1">item 1</li>
<li id="item_2">item 2</li>
<li id="item_3">item 3</li>
<li id="item_4">item 4</li>
<li id="item_5">item 5</li>
<li id="item_6">item 6</li>
</ul>
<script>
var selected = new Array();
$(function () {
$('#select_sortable').sortable({
//only with handle part, this is sortable
handle: '.handle',
//show cursor while it moves
cursor: 'move',
opacity: 0.5,
update: function (event, ui) {
console.log($(this).sortable("serialize"));
}
}).selectable({
cansel: '.handle',
filter: 'li',
selected: function (event, ui) {
//if selected item is not in an array.
if (selected.indexOf(ui.selected.id) === -1) {
//push an selected item in an array.
selected.push(ui.selected.id);
console.log(selected);
}
},
unselected: function (event, ui) {
var id = ui.unselected.id;
//remove an selected item from an array with splice.
selected.splice(selected.indexOf(id), 1);
}
//first add ui-corner-all class which makes squares rounder.
//add div handle class with pre ui icon, that is a carat indicating movable up and down.
}).find('li').addClass("ui-corner-all").prepend("<div class='handle'><span class='carat ui-icon ui-icon-carat-2-n-s'></span></div>");
});
</script>
</body>
</html>
0 件のコメント:
コメントを投稿