マウスでブロックをドラッグドロップできるようにするjQueryプラグイン「jQuery.Shapeshift」
http://mcpants.github.io/jquery.shapeshift/
マウスでブロック要素を自由に並べ替えできる、面白いjQueryプラグイン。サンプルは下記サイトにあるので割愛。
＜導入方法＞
- GitHubのプロジェクトページを開き、画面右側の「DownloadZip」をクリック、ファイルをダウンロードする
- ダウンロードしたファイルを展開し、coreの中身を適宜取り出す。
- 導入するページにjQuery、ｊQueryUI、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、孫要素で幅を設定するとおかしくなる。
導入も簡単なので、使い道があればどこかで使ってみたいものである。
