フリーランス チャレンジ!!

読者です 読者をやめる 読者になる 読者になる

フリーランス チャレンジ!!

週休4日制に俺はなる!

【JavaScript】ドラッグ&ドロップしながらスクロールしたい時の技

 みなさん、コウタロウです!!

 

今日はタイトルについて。

 

 

タイトルについて

今の仕事でタイトルについて実装しなけばいけなくなりました

 

www.ksakae1216.com 

以前の記事で紹介した「Angular Gantt」を利用し、ガントチャートのタスク(棒)を掴んで移動(ドラッグ&ドロップ)するんだけど、タスクが多くて、高さと横幅が足りないので縦、横スクロールがある

 

タスクを掴んで画面の一番上から一番下までドラッグしたいんだけど、タスク掴んで画面の一番下まで持ってっても画面がスクロールしない

 

スクロールした画面一番下にタスクを置きたいのに!!

 

何か方法がないか調べた

 あるじゃないの!!

jsdo.it

 

しかもReadme読むと「ドラッグ移動のときとかに使えそう?」と書いてある

使える、使えるよ!!

 

会社のPCで製造しているので、ここで詳細なコードは書けないんだけど、上記ページのJavaScriptを参考(ほとんどまるコピ)にして実装したらうまくいったよ

 

ただ、1つ問題があって、上記ページのサンプルはwindw自体をスクロールするんだけど、Angular Ganttの場合は、表示されている領域にスクロールがあるため、ちょっと困った

 

解決策としては、縦幅は、Angular Gantt内でスクロールしないよう目いっぱい広げて横のスクロールのみ上記ページサンプルを参考にAngular Gantt内をスクロールできるようにしました

gist5c1b2dba0a7e2cbfdb09a02183973b16

 

1行目で現在横にスクロールされている箇所にプラス20pxの位置をscrollPotionにセット

scrollLeft()にスクロール位置を引数で与えればその位置にスクロールされます

 

その他にコツとしては、上記サンプルページ同様、10ミリ秒で監視し少しずつスクロールするようにすれば滑らかにスクロールされます

 

最後に

ちょっと、荒い感じの情報ですが参考になれば!!