私はこれに対して2日間しっかりと頭を悩ませてきました.この問題の根本を突き止める方法についてアドバイスが必要です. うまくいけば、誰か (おそらくこれを読んでいるあなた?) が同様の問題を抱えていて、あなたが何らかの助けを提供できることを願っています.
私のアプリには、その名前の jQuery UI ウィジェットを介してドラッグできるものがいくつかあります。Ember のルーティングを使用してアプリ内をナビゲートするまで、これは非常にうまく機能します。UI が更新され、ドラッグ可能な項目内およびその周辺が再生成されると、何かが発生します。
それで、何が起こるのですか？
UI のルーティングの再描画後、ドラッグ可能な div は、マウス ポインターがイメージ要素の上にドラッグされると、その位置を最も大幅に更新しません。ポインタがドラッグ可能なdivの外に出るまで位置が更新されないため、モーションもぎくしゃくしています。また、ドラッグがスタックし、マウスボタンが離された後も div がマウスを追跡し続けます。
アップデート
ドラッグ可能なマウス イベント ハンドラーである jQueryUI Mouse にブレークポイントを追加しています。マウスダウンおよびマウスアップイベントを検出すると壊れる ドラッグするとアップイベントが登録されていないことがわかります。実際、ルーティング後に再レンダリングされた div 内の任意の場所をクリックしても、ダウン イベントもアップ イベントも登録されません。
マウスリスナーを台無しにするために何ができるかわかりません。
更新 2
私はマウスイベントのうさぎの穴を掘り下げ続け、次のことを思いつきました。jQuery UI Mouse がイベントをキャッチするためにドキュメントにバブリングしないイベントに関連するEmber.js に関する解決済みの問題があります。そのため、何が起こっているのかを確認するために、言及された場所にいくつかのログ行を入力しました。コンソールのフラッディングを避けるために、mouseDOWN イベントのみにログオンします。
私が見ているのは、Ember 内のルーティングされたナビゲーションの前に、Ember 階層全体がイベントに対して未定義のマネージャーを返すことです。ただし、ルーティング後、ビューの 1 つが null を返し、バブリングがすぐに停止します。ドキュメント ノードの jQuery UI は言うまでもなく、Ember アプリのルートにある ApplicationView でさえ発言権を持ちません。
ただし、 null を返すのは奇妙です。これは、チェックしているビューが、Ember が内部的に保持しているビューのリストにないためです。明らかにDOMに存在しますが、どういうわけか登録されていないか、ある時点で登録解除されています。
狩りは続く…
そして、私はそれについて何をしましたか？
「手動で」呼び出すのではなく、jQueryのドラッグ可能をミキシングにしました
このSOの質問とgithubの関連コードに従って、jQuery UIがより統合された方法でオブザーバーを作成および破棄できるようにしました。ただし、このリファクタリングの前とまったく同じように機能します。
アプリで使用されている他のすべての JavaScript ライブラリをアンロードして無効にしました
テスト用に削除したキャンバス描画がいくつかありました。
できる限り多くの UI 階層を削除しました
私は ember アプリを body のすぐ下に置き、アプリビューを「タグレス」にして、バグのあるドラッグ可能なものが発生する深さを変更して減らしました。サブビューのアウトレットではなく、アプリビューのアウトレットに直接接続するビューレベル全体を短絡しました。
ナビゲーションの一部をドラッグ可能にしました
ルーティング時に更新されず、ドラッグ可能ないくつかのナビゲーション項目を作成しました...それらは、ルーティング後に必要に応じてドラッグし続けます。
別の Ember アプリでドラッグできるようにしました
この問題は、同じ Rails プロジェクト内の別の Ember アプリ (同じ css およびベース html、javascript) では発生しません。私はそのアプリでいくつかのランダムなボタンやものをドラッグ可能にし、狂ったように「ルーティング」しましたが、それらは常に必要に応じてドラッグ可能であり続けました. 構造または UI 階層に固有の何かが原因のようです。
もちろん、私も多数のコールバックをログに記録し、ブラウザを切り替えました
適切な UI 要素が削除されたときに物事が正しく取り壊されていることを確認するために、各ログ行をトレースする途方もない数のことをログに記録して、正しいことが起こっているように見えるようにしています。最新の Safari、Chrome、および Firefox でも同じことが起こります。
なぜ Ember と Draggable を非難するのですか?
このアプリケーションは、TangledMessOfJavascript™ アプリケーションとしてプロトタイプ形式で作成しました。それはすべて同じことをしました。Draggable と同じ基本的な UI 階層を使用して、DOM の一部をナビゲーションとして置き換えます (一部の Ember 推奨のものを除く)。
JSフィドルはどうですか？
私はアドバイスを求めていますが、この自明ではないアプリ階層からフィドルを生成しようとはしません。私は怠惰になろうとしているわけではありません。これをいじるのに真剣に丸一日かかります簡単なテストケースを作ることができます。
私が欲しいものは？
私はこれを魔法のようにソールにする人を探しているわけではありません...私が得たいのは、これを追跡する方法に関するいくつかの提案です. 私はルージュイベントリスナーまたはその他の奇妙なものに傾いています。この種のものをデバッグする良い方法が見つかりませんでした。