マウスでブロックをドラッグドロップできるようにするjQueryプラグイン「jQuery.Shapeshift」
http://mcpants.github.io/jquery.shapeshift/

マウスでブロック要素を自由に並べ替えできる、面白いjQueryプラグイン。サンプルは下記サイトにあるので割愛。

<導入方法>

  1. GitHubのプロジェクトページを開き、画面右側の「DownloadZip」をクリック、ファイルをダウンロードする
  2. ダウンロードしたファイルを展開し、coreの中身を適宜取り出す。
  3. 導入するページにjQuery、jQueryUI、jQuery-Touch-punch(core内に同梱)、jQuery.shapeshift(core内に同梱)をリンクする
  4. 移動させるブロック要素の親に、適当なクラス名を付ける
  5. 下記のJavascriptを記載する。(下記の例はtarget_class_nameと付けた場合)

    $(document).ready(function() {
    $(“.target_class_name”).shapeshift();
    })

<注意事項>

  • jQueryのバージョンが低い(1.8)だと正常に動作しないと思われる。同梱版が2.0だったので、それを利用すること。
  • 移動させたい子要素にはwidthとheightを設定すること。子要素はauto、孫要素で幅を設定するとおかしくなる。

導入も簡単なので、使い道があればどこかで使ってみたいものである。