[jQuery UI] ドラッグ操作をスマホにも対応させるTIPS

自分の仕事はサーバサイドが主でUI作りなどはデザイナ任せなことが多いのですが、管理画面などではこちらでUIを作ることもままあります
そんなときに頼りにしているのがBootstrap+jQuery UIなのですが、jQuery UIのドラッグ操作がスマホのそれに対応していないのが難点です
最近は管理画面もスマホやタブレットに対応してほしいという話も多いので、これはなんとかしないといけません

で、そんなときにはjQuery UI Touch Punchが役立ちます

参考
jQuery UIをタッチイベントに対応させる
jQuery【 jQuery UI 】Touch Punch を使用してスマホ対応

ただしこれだけでは、スマホでスクロールさせるつもりでスワイプしていたら意図せずドラッグしてしてしまった・・・みたいな状況も起こるようになります
特にsortableなんかでは問題になりがち
そのためエレメント全体を掴めるようにはしないでhandleを付けておくのがおすすめです

参考
ドラッグ&ドロップで並べ替えるときのドラッグできる部分を指定

以上を組み合わせたサンプルコードです

<html>
<head>
<meta charset="utf-8">
    <title>jQuery UI Touch Punch sample</title>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#sortable {
    list-style-type: none;
    padding: 0px;
}
#sortable li {
    margin: 10px 0px;
    padding: 10px;
    border: #999 1px solid;
}
#draggable {
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: #999 1px solid;
}
.handle{
    color: #999;
    padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.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>
<script>
$(function() {
    $('#sortable').sortable({
        handle: 'i.handle',
        axis: 'y'
    });
    $('#draggable').draggable({
        handle: 'i.handle'
    });
});
</script>
</head>
<body>
 
<ul id="sortable">
    <li><i class="handle fas fa-arrows-alt-v"></i> Item 1</li>
    <li><i class="handle fas fa-arrows-alt-v"></i> Item 2</li>
    <li><i class="handle fas fa-arrows-alt-v"></i> Item 3</li>
    <li><i class="handle fas fa-arrows-alt-v"></i> Item 4</li>
    <li><i class="handle fas fa-arrows-alt-v"></i> Item 5</li>
    <li><i class="handle fas fa-arrows-alt-v"></i> Item 6</li>
    <li><i class="handle fas fa-arrows-alt-v"></i> Item 7</li>
</ul>
 
<div id="draggable">
    <p><i class="handle fas fa-arrows-alt"></i> ドラッグしてね</p>
</div>

</body>
</html>

動作サンプル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です