jQuery UI sortable を使ってD&Dでリストの並び替えを実装する。
PR
自作RSSリーダーを作ろうかと思い
そこでストックした記事を並び替えなどの機能を実装したいなと思いD&Dでの操作で使えそうだったのでそのメモ的なものです。
jQuery UI sortable を使ってリストのD&Dを実装する。
とりあえずどんな事が出来るかというとこんな感じです
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ならびかえ jQuery UI</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<script>
$(function(){
$('#sortable').sortable({
update: function(event,ui){
console.log("並び替えが実行されました");
//ここに実行後の操作を入れる
}
});
});
</script>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: block;
padding: 10px 20px;
background: #000;
margin-bottom: 8px;
color: #fff;
cursor: pointer;
}
</style>
<body>
<div class="block">
<ul id="sortable">
<li>大阪府</li>
<li>京都府</li>
<li>滋賀県</li>
<li>奈良県</li>
<li>和歌山県</li>
<li>兵庫県</li>
</ul>
</div><!-- /.block -->
</body>
</html>
まずは、jQueryとjQuery UIの読み込み
次に並び替えをしたいリストの親 li の親つまり ul に jQuery UI の sortable を実行するための目印となるIDを付けておきます、今回はわかりやすくIDをsortableにしました
次にjQueryでjQuery UI のsortableを使ってセレクターにこのIDを指定するだけで、もうD&D出来るようになります。すごく簡単ですね、あとはイベントを使っていろんなタイミングでDBとの連携を盛り込めば並び替えを保存する事が出来る。
DBにAjaxで保存してもいいし、ブラウザのローカルストレージを使って記憶させるのも良いかな？
jQuery UI 部分
$(function(){
$('#sortable').sortable({
update: function(event,ui){
console.log("並び替えが実行されました");
//ここに実行後の操作を入れる
}
});
});
update は、要素の並び替えが終わり確定した時点で実行するイベントです、他にも色々あります
イベントを見る感じ、複数の sortable でアイテムを共有することが出来るみたいですね、ToDoリストとかも作りやすそうですね。
プロパティ イベントタイプ 説明 start sortstart 並び替えが開始されたときに呼び出されます。 sort sort 並び替え中に呼び出されます。 change sortchange 並び替え中に、DOM要素の位置が変更されたときに呼び出されます。 beforeStop sortbeforestop 並び替えが終了し、placeholder もしくは helper が、まだ有効なときに呼び出されます。 stop sortstop 並び替えが終了したときに呼び出されます。 update sortupdate 並び替えが終了し、DOM要素の位置が変更されたときに呼び出されます。 receive sortreceive 他の Sortable 要素からアイテムを受け取ったときに呼び出されます。 remove sortremove 他の Sortable 要素に Sortable アイテムを移動し、自分のSortable 要素から削除されたときに呼び出されます。 over sortover 並べ替えアイテムが Sortable 要素に入ったときに呼び出されます。 out sortout 並べ替えアイテムが Sortable 要素から出たときに呼び出されます。 activate sortdeactivate 関連付けられている Sortable 要素の Sortableアイテムのドラッグが開始したときに呼び出されます。 deactivate sortdeactivate 関連付けられている Sortable 要素の、Sortable アイテムのドラッグが終了したときに呼び出されます。
jQuery UI では他にも色々、自由配置などいろんな使い方があるようです。
今回はリストを並び替えるという機能の実装のみで試してみましたが、これを応用してホームページのサイドバーのアイテムをD&Dで自由に並び替えを出来るような機能の実装とかにも使えそうですね。
PR
短縮URL:
COMMENT