[jQuery]マウスのドラッグでスクロールさせる方法

ほぼパクリ。パクリだけど忘れちゃ詰むから記事にする。

参考

ここの内容をパクるというか、そのまま使えば解決。
最高。ありがとうございます。

他にもそれっぽい記事はあったけど動かんかったりライブラリ古かったりめっちゃ長かったりで話にならんかった。これはjQuery3系で動くので現行として何も問題ないです。

jsのは触ってないけど、jQuery拡張版はそのまま張っても動かないので注意。

$(function(){
//マウスドラッグスクロールの内容
});

動かんな？って思ったら無名関数で囲ってみましょう。

で、デモのjs記述部の最後にあるこれ。

$(".mousedragscrollable").mousedragscrollable();

overflowの枠（親）にあたる要素に、ここで指定したclassを書けば反映する。

cssの組み方についてはoverflow:auto;なりoverflow:scroll;なりで子要素が親要素をぶち抜いてスクロールバーが表示される状態になってればOK。

スクロールバー表示についてはちょっと難しい。基本的に枠内に収まるように自動調整されるのがhtmlなので、実数値を指定するのが無難。縦スクロールは大体でいけるけど、特に横スクロールの場合はシビアに組んでいく必要がある。まあ今回の本筋から外れるので詳細は割愛。

これには慣性はついてない。慣性があると必然的にやらんといかん「止める」動作はあんまり好きくないんでありがたい。

なんかおかしいと思ったら、これ、5ボタンマウスの進む・戻るが無効化されてる。
マウスのクリック全てがドラッグ対象になってる。

普通に考えて、というか個人的に左クリックだけが対応すればいいのでそれを対処する。

突貫なので追記で済ませるけど、これを3箇所に書き加える。

if(event.button === 0){
}

対象はこれと

$(e).mousedown(function (event) {

これと

$(e).click(function (event) {

これと

$(document).mousemove(function (event) {

これ。

}).mouseup(function (event) {

4箇所それぞれ、マウスクリック動作の直下の内容をifで囲って左クリック時だけを対象にする。

0が何かっていうとボタンに振られてる番号で、5ボタンマウスだとこうなる。

Razerから手榴弾みたいなマウスも出てるし、「こいつらは除外」を指定するのはめんどくさすぎるんで、「こいつだけ対象」ってのを条件分岐してるわけになる。

もうちょっと脳みそ使えたらもうちょっとシンプルに書けると思う。

一応こんな感じ。

“mousedragscrollable.js” をダウンロード

htmlでページを組んで動作確認して、wordpressに放り込んだら動かなかった。検証を覗くと「$(…).mousedragscrollable is not a function at HTMLDocument.<anonymous>」とかいうエラーを吐いてた。

他のjavascriptと競合して動かなくなったっぽい。静的ページ作成時には動いていたのでwpによる何かか、プラグイン周りか。その辺りを掘り下げてもどうにもならないんで、こちらをいじって対処しないといけない。

「$()」のところを全部「jQuery()」に変える。エディタで開いて「$(」を「jQuery(」で置換する。他にも手段はある、この記事で紹介されてた。ただこちらでは上記の修正じゃないと改善しなかった。

jQuery1系からこういうことは言われてた気がするんだけど、直面したのは初めて。