仕事でshuffle.jsを使ってリストの並べ替えをするように指示があったのですが、動かなかったのでそのときの対応策です。

古いバージョンで動くように

まずはshuffle.jsを入れて設置してみたのですが全く動かず。他のjsと競合してるせいかなと思って、他のjs全てを削除してみましたが動かず。ボタンをクリックしてみても何の反応も無し。んで、調べてみると新しいバージョンだと動かないけど古いバージョンなら動いたよって報告を見つけたので、その通りにしてみたところ動くようになりました。

古いバージョンのshuffle.jsがなかなか見つからなかったので参考サイトのデモページを「ページを保存」して、そこからjquery.shuffle.min.jsをひっぱってきました。

参考サイト：http://nakazilab.com/jquery-shuffle/

↓「ページを保存」したデモサイト

http://nakazilab.com/demo/jquery-shuffle/index.html

参考サイトの設置方法の説明だと、ボタンに.activeをクリックで付けたり外したりするscriptも一緒に書いてあってとても便利です。

shuffle.jsと競合したjs

設置する前から「こら競合するやろ」と思ってたmatchHeight.jsと見事に競合しました。そらそやな。matchHeight.jsは横並びのリストの高さを揃えてくれるjsです。んでshuffle.jsはリストなどを並び替えてくれるjs。相性悪いですね。しかもshuffle.jsは高さをcssで指定しておかないと並び変える要素内の画像が途中で切れてしまうらしいんです。私の場合は要素内に変な余白ができてしまいました。

matchHeight.jsを削除して高さを指定

なのでmatchHeight.jsを削除して読み込みもやめて、shuffle.jsの並び替えの要素にはcssで高さを指定しました。今回の仕事ではレスポンシブサイトでの使用だったので、pcの場合では要素内のテキストに高さをcssで指定して、スマホの場合は%で要素の高さを指定しました。PCの場合もスマホの場合も指定した高さをはみ出たらoverflow: hidden;で非表示にしてしまいます。

#itemListにclearfixが効かない

並び替えの要素を囲っている親要素（デモサイトでの#itemList）にはclearfixが効かないです。PCのFireFoxで確認した場合は問題無いのですが実際にスマホ（experia）で確認すると、clearfix付きの#itemListの高さが算出されず並び替えの要素が重なって表示されてさらにその下のコンテンツまでが重なってしまいました。floatの親要素の高さが算出されないのと同じ症状です。

#itemListをclearfixで囲む

対応策としては#itemListをclearfixで囲って高さを算出するようにすることです。

【例】

<div class="clearfix">

<div id="itemList">

<!--  ここに並び替えの要素  -->

</div><!--  /itemList  -->

</div><!--  /.clearfix  -->