ブロックの並び替え
これもよくある質問だったのですが、JSで各ブロックの並び順を変更するというプログラムです。これはそれほど難しいものでもなく、方法はサイトに出回っていますが、応用させようとすると少し厄介になります。
基本的にはjQuery UIのsortableというライブラリを使って実装します。
http://jqueryui.com/sortable/
必要なライブラリとしては以下のように設置すればうまくいくとは思いますが、昔のソースなので現在はうまくいくか調査はしていません。
Jquery uiのダウンロードはこちらから
<head>
・・・
<link rel="stylesheet" href="css/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.sortable.js"></script>
<script>
jQuery( function() {
jQuery( '#jquery-ui-sortable' ).sortable();
} );
</script>
<style> #jquery-ui-sortable li {
list-style-type: none;
}
</style>
</head>
・・・
<link rel="stylesheet" href="css/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.sortable.js"></script>
<script>
jQuery( function() {
jQuery( '#jquery-ui-sortable' ).sortable();
} );
</script>
<style> #jquery-ui-sortable li {
list-style-type: none;
}
</style>
</head>
そして、HTML画面上ではLIの並び順を変更するようにします。
<ul id="jquery-ui-sortable">
<li class="ui-state-default">項目 1</li>
<li class="ui-state-default">項目 2</li>
<li class="ui-state-default">項目 3</li>
</ul>
<li class="ui-state-default">項目 1</li>
<li class="ui-state-default">項目 2</li>
<li class="ui-state-default">項目 3</li>
</ul>
これが基本的なブロックの並び替えになります。ここから並び順をどう処理するかは、また別の技術が必要になりますが、spanで番号を振っておくなどやり方はさまざまですが、詳しいページで調べてみるといいでしょう。
以下がデモになります
- 項目 1
- 項目 2
- 項目 3
