マウスでブロックをドラッグドロップできるようにするjQueryプラグイン「jQuery.Shapeshift」
http://mcpants.github.io/jquery.shapeshift/
マウスでブロック要素を自由に並べ替えできる、面白いjQueryプラグイン。サンプルは下記サイトにあるので割愛。
<導入方法>
- GitHubのプロジェクトページを開き、画面右側の「DownloadZip」をクリック、ファイルをダウンロードする
- ダウンロードしたファイルを展開し、coreの中身を適宜取り出す。
- 導入するページにjQuery、jQueryUI、jQuery-Touch-punch(core内に同梱)、jQuery.shapeshift(core内に同梱)をリンクする
- 移動させるブロック要素の親に、適当なクラス名を付ける
- 下記のJavascriptを記載する。(下記の例はtarget_class_nameと付けた場合)
$(document).ready(function() {
$(“.target_class_name”).shapeshift();
})
<注意事項>
- jQueryのバージョンが低い(1.8)だと正常に動作しないと思われる。同梱版が2.0だったので、それを利用すること。
- 移動させたい子要素にはwidthとheightを設定すること。子要素はauto、孫要素で幅を設定するとおかしくなる。
導入も簡単なので、使い道があればどこかで使ってみたいものである。