自分の仕事はサーバサイドが主で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>