1

ドラッグ可能なdiv #boxが大きい方の#dashboard内に移動でき、ダッシュボード#windowよりも小さい別のdivを通してのみ表示できます。

これは順序です:
<div id=’dashboard’&gt; <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つの悪いことが起こります。


  1. マウスポインタとボックスの間に距離が作成され、ウィンドウに戻ると、ボックスはこの距離からドラッグされます
  2. ウィンドウの外でマウスを動かし続けると、ボックスは「ドラッグ位置」と「境界線修正」位置の間で点滅し始めます。

2番目の問題は、setIntervalが呼び出される前にこれを追加することを回避できますが、マウスがウィンドウに再度入ってドラッグを再度トリガーする場合$("#box").trigger("mouseup");など、一種の反対の関数が必要です。したがって、私の質問のタイトルです。$("#box").trigger("mousedown");

4

1 に答える 1

0

「<em>Nal」の提案に従って、一時的に解決しました (より良い解決策を望んでいるため)。

  1. #boxがドラッグを開始すると、#clone ( display: noneon box) に置き換えられます
  2. ドラッグすると、 #cloneは、表示されている#window内にある場合はui.position#box取得し、マウス ポインターが外に出た場合は境界線にとどまります
  3. ドラッグを停止すると、 # boxは#cloneを取得し、 #cloneが削除されている間に再表示 ( )されます。css('left')display: block
于 2012-09-16T10:24:29.530 に答える