jQuery UIをタッチイベントに対応させる

jQuery UIはデフォルトだとタッチイベントに対応していないようなので、タッチイベントに対応させる方法を調べました。

サンプルコード

まずは特に対応をしていない場合です。
例として、「slider」「sortable」「draggable」の3つを試してみます。

必要なファイルを読み込みます。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

HTML

<div class="slider-wrapper">
    <div id="slider"></div>
</div>

<ul id="sample">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>

<div id="draggable" class="ui-widget-content">
	<p>Drag me around</p>
</div>

CSS

.slider-wrapper {
    width: 280px;
    margin-left: 20px;
}
#sample li {
	margin: 10px;
	border: #000 1px solid;
	padding: 10px;
	background: #fff;
}
#draggable {
	width: 100px;
	height: 100px;
	padding: 10px;
}

JavaScript

$(function() {
	$('#slider').slider();
	$('#sample').sortable();
	$('#draggable').draggable();
});

デフォルトのjQuery UIのデモページ
スマートフォンで確認してみると、タッチイベントでは動作しないと思います。
　

jQuery UI Touch Punchのプラグインを使用することで対応できます。
プラグインをダウンロードして、jQuery UI関連の読み込みの後に読み込みを追加すればOKです。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

タッチイベント対応のデモページ
スマートフォンで確認してみると、タッチイベントで動作することが確認できました。
　

【参考サイト】

• jQuery UI Touch Punch – Touch Event Support for jQuery UI
• jQuery UIをタッチデバイスに対応させるためのライブラリ・jQuery UI Touch Punch – かちびと.net