4

Dojo ツールキットの dnd API を使用してアバターの位置を変更することはできますか? 現時点では、ドラッグすると、ドラッグしたアイテムのアバターがマウス カーソルの右下に表示されます。マウスカーソルと同じ位置にしたい。アプリケーションでいくつかのユーザビリティ テストを実行しましたが、ほとんどの人は、カーソルをドロップ領域に移動するのではなく、アバターをドロップ領域にドラッグしようとするようです。どんな入力でもいいでしょう。ありがとう！

4

1 に答える 1

6

申し訳ありませんが、技術的な理由でできません。

更新: 一般的な要求により、これらは技術的な理由です:

  • マウスの真下にノードがある場合、そのノードはすべてのマウス イベントを取得します。
  • マウス イベントは、親チェーンをバブルアップします。
  • このノードをマウスで動かしたとします。このノードは常にすべてのマウス イベントを取得します。
  • これは、移動したノードの親でない限り、ターゲットなどの他のノードはマウス イベントを取得できないことを意味します。通常、これは当てはまりません。

しかし、私は他の人がそれを行うことができることを知っています! できるはずです！はい、可能です…原則として：

  • 対象ノードをすべて登録しましょう。
  • 関連するマウス移動イベントを最上位の親 (ドキュメント) で直接キャッチしましょう。
  • ドラッグ操作を検出したら、次のようにします。
    1. すべてのターゲットのジオメトリ (バウンディング ボックス) を計算します。
    2. マウスを動かすたびに、現在のマウスの位置がターゲットと重なっているかどうかを確認できます。「A+」学生のボーナス ポイント: 他のノードとのオーバーラップを検出します。たとえば、見た目上の理由でターゲットが部分的に不明瞭な場合など、この状況を正しく処理します。
    3. 現在のマウスの位置がターゲットと重なっている場合は、「ドロップ可能」アクションを開始しましょう。たとえば、エンド ユーザーがドロップできることをエンド ユーザーに知らせるためのキューを表示します。

なぜ道場はそれをしないのですか？いくつかの技術的な理由から (ついにそこにたどり着きました!):

  • ほとんどのブラウザでは、ノードのジオメトリ計算にバグがあることで有名です。テーブルやその他の重要な配置方法が含まれるとすぐに、バウンディング ボックスが正しいことを 100% 確信することはできません。
  • ジオメトリの計算はコストのかかる操作であり、ドラッグ操作中に変更を加えることができないと仮定して (常にそうであるとは限りません)、すべてのターゲットに対してすべてのドラッグ操作で少なくとも 1 回実行する必要があります。ブラウザはさまざまな理由でノードをリフローする場合があります ⇒ 既存のターゲットを移動/サイズ変更できるため、注意が必要です。
  • 通常、計算されたボックスはリストに保持されます ⇒ 交差のリストをチェックするのは O(n) (線形) です ⇒ ターゲットの数が増えるとうまくスケーリングしません。
  • すべてのマウス イベント ハンドラは高速である必要があります。高速でないと、ブラウザのマウス イベント処理機能が「壊れて」、予期しない副作用が発生する可能性があります。マウス イベントの処理が遅くなる理由については、前のポイントを参照してください。
  • 線形検索の改善は可能です。たとえば、2D 空間ツリーを使用できますが、より多くの (はるかに多くの) JavaScript コード ⇒ クライアント側でダウンロードするより多くのもの ⇒ 通常、それは価値がありません。

どうすればそれを知ることができますか? Dojo は以前のバージョンでこの種のドラッグ アンド ドロップを使用していたため、上記で説明した問題との戦いにうんざりしていました。どのような改善も困難な戦いであり、コード サイズが増加しました。最後に、既にブラウザーに組み込まれているメカニズムを再発明して複製しないことにしました。ブラウザは実質的に同じ作業を行います。ノードのジオメトリを計算し、下にあるノードを見つけ、マウス移動イベントを適切にディスパッチします。

現在の実装では、マウス移動イベントを使用せず、ジオメトリを計算しません。代わりに、ドラッグが開始された後にターゲットによって検出されたマウス オーバー/アウト イベントに依存します。確実に機能し、適切にスケーリングします。

この話のもう 1 つの欠点は、Dojo がターゲットをコンテナーとして扱うことです。これは非常に一般的な使用例 (ショッピング カート、アイテムの再配置、階層の編集) です。現時点では、線形コンテナーと汎用ツリーが実装されており、カスタム コンテナーも可能です。ドラッグ アンド ドロップすると、ドラッグされたアイテムをターゲット コンテナー内の適切な位置に表示してドロップできます。たとえば、既存のアイテムの間にアイテムを挿入できます。幾何学的計算とチェックを使用してこの機能を実装すると、法外なコストがかかります。

于 2009-08-04T01:44:36.483 に答える