[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>

動作サンプル

[jQuery] class変更されたときにevent発火

対象elementのclassが変更されたときになにか処理を行いたい案件がありました。
もともとのclassを変更する処理のところに追記できればいいんですが、事情でそこには手が出せないので、なんとか外側からclassの変更を察知したい。

ということで、厳密に言ったら”class変更”時ではないのですが、jQueryでaddClassされたときにカスタムeventが発生するようにして対応しました。

まずどこかにカスタムイベント発火処理を書いて

// addClass時にイベントを起こす
(function(){
	// 元のmethodを保存
	var originalAddClassMethod = jQuery.fn.addClass;
	
	jQuery.fn.addClass = function(){
		// 元のmethodを実行
		var result = originalAddClassMethod.apply(this, arguments);
		
		// カスタムイベントを発火
		jQuery(this).trigger('cssClassAdd');
		
		return result;
	}
})();

あとはeventを受け取って処理したい内容を書く

$('#hoge').bind('cssClassAdd', function(){
    // やりたい処理内容
});

参考
jQuery – Fire event if CSS class changed