jQuery UIのDraggableをスマートフォンで動かす

昨日jQuery UIのDraggableがiPhonesafariだと動かないって話を書いたので、ついでにどうしてもdraggableにしたい場合はどうするんだろうと思って調べた。


これを使えばできそうなので試してみた。
furf/jquery-ui-touch-punch


使い方はjQuery UIの後でライブラリを読み込むだけ。

これで普通にdraggableすれば、スマートフォンのタッチでマウスのドラッグみたいなことができるようになる。

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src="js/jquery-ui-touch-punch-master/jquery.ui.touch-punch.js"></script>
<script>
    $(function () {
        $('.box').draggable();
    });
</script>


これなら、ChromeのEmulates touch eventsにチェックが入っていてもドラッグできる