ドラッグ可能なdiv #boxが大きい方の#dashboard内に移動でき、ダッシュボード#windowよりも小さい別のdivを通してのみ表示できます。
これは順序です:
<div id=’dashboard’> <div id=’window’ > <div id=’box’ ></div> </div> </div>
私が探しているのは、 #boxが#windowの境界に達したときに自動スコアリングの動きを再調整することです。したがって、ウィンドウのマウスリーブ(ドラッグ中)で、 #dashboardを反対方向に移動し始めるsetIntervalをバインドします。
ドラッグ可能な#boxの移動が停止することに気付きました。これは、ユーザーがウィンドウを終了するときに(押し続けている間)マウスの移動を停止し、移動が自動的に続くことを期待しているためです。
そのため、ドラッグ可能な#boxの位置を、#dashboardと反対の動きで強制的に動かして、見たところ静止して境界線の近くに配置する必要があります。
これにより、#boxとマウスの位置(#windowの外側)の間に距離が作成され、マウスが再び動き始めると、この位置から#boxがドラッグされます(ひどい!)。
これを回避するために、マウスが#window tiggering mouseupを離れたときにドラッグ可能を強制的に停止することにしました(フォーラムでこれを読んで機能します)。
そして今、マウスが#windowに再び入るときにドラッグを再設定する方法が必要です。どのようにできるのか?
アップデート:
画像で状況を説明しようとしています。
ここで、ウィンドウの外側にボックスを移動してドラッグ
を開始し、ウィンドウをスクロールします。ウィンドウを後方に移動します(setInterval()が呼び出されます)
。ウィンドウを移動すると、ボックスが後方に移動します。したがって、絶対位置
では、ボックスをウィンドウの境界の近くに再配置する必要がありますが、これにより、ボックスとウィンドウの外側にあるマウスポインタとの間に距離が生じます。
そして、問題:マウスを再び動かして、ドラッグイベントがトリガーされると "ボックスとの距離を覚えており、触れずに魔法のように動かします。
アップデート2:
すべてのコードを表示するためにjsFiddleを作成しました。ここで
テストするには、右側
の#windowの外に#boxを移動するだけで、#dashboardが後方に移動を開始します(ウィンドウ内に戻ってくるのを止めるため)。
残念ながら、2つの悪いことが起こります。
- マウスポインタとボックスの間に距離が作成され、ウィンドウに戻ると、ボックスはこの距離からドラッグされます
- ウィンドウの外でマウスを動かし続けると、ボックスは「ドラッグ位置」と「境界線修正」位置の間で点滅し始めます。
2番目の問題は、setIntervalが呼び出される前にこれを追加することを回避できますが、マウスがウィンドウに再度入ってドラッグを再度トリガーする場合$("#box").trigger("mouseup");
など、一種の反対の関数が必要です。したがって、私の質問のタイトルです。$("#box").trigger("mousedown");