【jQuery高速化】ドラッグ処理が追いつかない

Question

お世話になります。

以下のように予約表をJqueryで実装しています。
https://jsfiddle.net/teratailler/63jL7241/

ゆっくりドラッグすると連続してボックスを選択できるのですが、はやくドラッグすると飛び石でボックスが選択されます。
これをドラッグをはやくしても連続してボックス選択できるようにしたいです。

おそらくJqueryの処理速度が追いついていないと思うのですが、ご教授のほど何卒よろしくお願いします。

Comments

[退会済みユーザー]

押してる間に通過したものじゃなく、　始点（mousedown)～現在地or終点（mouseup)で計算できるきがするんだが

Answer 1

どんなに頑張ったところで全セルのmouseoverは拾いきれるはずがないです。そのセルでmouseoverイベントが発生しないことだってある。

なので、方式を見直して「mousedown」～「mousemove」～「mouseup」の間を補間するようにすればよいでしょう。

Comments

[退会済みユーザー]

ご回答ありがとうございます！
>方式を見直して「mousedown」～「mousemove」～「mouseup」の間を補間するようにすればよいでしょう。
これは具体的にどういうことでしょうか？

[yambejp]

横方向だけにしか伸びていないデータであれば
始点と終点がわかれば「途中をドラッグしています」という
行為自体は重要ではないですからね

Answer 2

jQuery-UIを使用する選択肢はないでしょうか？
Selectableを使用すると一瞬で同じようなことができます。（スマホ対応する場合は別途モジュールが必要です）

Comments

[退会済みユーザー]

ご回答ありがとうございます！返事遅くなってすみません。
こちらの採用を検討しようと思いますが以下が気になっています。具体的な名称やドキュメントへのリンクはご存知でしょうか？
>スマホ対応する場合は別途モジュールが必要

[Tomak]

スマホ対応する場合は、スマホのタッチイベントに対応しなければならないので、jQuery UI Touch Punch というライブラリーを使います。私はこれしか知らないですが、探せば他にもあるかもしれません。
----
http://touchpunch.furf.com

インストール方法はそのまま読み込むだけですが、この辺のサイトが参考になるかもしれません。
----
http://phiary.me/jquery-ui-touch-punch-smartphone-use/#post-h2-id-1

[退会済みユーザー]

一番現実的な案をご提案いただきましたのでベストアンサーとさせていただきます。
今回の要件では始点と終点だけではダメでドラッグ中にもアニメーションする必要がありましたので。

[退会済みユーザー]

ありがとうございました！

Answer 3

詳しくは読み込んでませんが、座標を拾って処理をしているのですよね？
マウスの感度は１ドットずつ読み込むわけにはいきませんので
始点から終点までの途中については多少飛ぶのはロジック的に仕方ないのでは？
テストしてみないとわかりませんが、マウスの押し込みと移動時の
オブジェクトへのmouseoverを使えばもう少し細かく拾えるような気がします。

Comments

[退会済みユーザー]

ご回答ありがとうございます！
>座標を拾って処理をしているのですよね？
はい。
>始点から終点までの途中については多少飛ぶのはロジック的に仕方ないのでは？
最終的にあきらめるしかないと思いますが、考え抜いても答えがでなかったので、何か打開策がないか質問させていただいた次第です。