0

ビュー ポートの 2 点間のすべてのコンテンツを選択する方法を見つける必要があります。HTML要素をまたぐためにもその選択が必要です。

2 つの可動ボックスがあるページを考えてみましょう。これらのボックスは、ユーザーがコンテンツ内で移動します。それらは、画面上のすべてのコンテンツの前に絶対に配置されます。ボックスを移動するときは、その間にあるすべてのコンテンツを選択する必要があります。誰かが似たようなものに出くわしましたか? 私が本質的にやろうとしているのは、スマートフォンの選択ハンドルを模倣することです。

javascript 関数 document.elementFromPoint(x, y) があることは知っています。ボックスがその時点で一番上の要素として選択されるため、この場合は機能しません。

4

3 に答える 3

0 
var leftBound = Math.min(point1.x, point2.x);
var rightBound = Math.max(point1.x, point2.x);
var topBound = Math.min(point1.y, point2.y);
var bottomBound = Math.max(point1.y, point2.y);

$(".").filter(function(x) {
    var offset = $(this).offset();
    var top=offset.top, bottom=top+$(this).height;
    var left=offset.left, right=left+$(this).width;
    var corners = [[left,top], [left,bottom], [right,top], [right,bottom]];

    function inBox(point) {
        var x=point[0], y=point[1];
        return (leftBound<=x && x<=rightBound) && (topBound<=y && y<=bottomBound)
    }

    // overlap-based selection policy
    //   selects if one or more corners is in selection
    return corners.some(inBox);

    // overlap-based selection policy #2
    //   selects if any part of element is in selection
    return corners.some(inBox) //|| ... slightly more complicated logic

    // only-wholly-enclosed selection policy
    //   selects only if entire element is in selection
    return corners.every(inBox);
})

$(".")jQuery が不要な場合は、再帰コールバック ベースの DOM トラバーサルのお気に入りの方法に置き換えてください。

于 2012-05-10T23:22:42.690 に答える
0

その音から、要素の位置を自分で追跡し、JavaScript コード内からどの要素に触れるかを計算する方が良いかもしれません。これにより、DOM とのやり取りが減ります。

私が聞いた、または他の背後から要素を取得するために使用した唯一の方法ではない場合は、ここで詳しく説明します: http://www.vinylfox.com/forwarding-mouse-events-through-layers/

基本的に、元の要素を一時的に受け取る要素を非表示にしてから、 elementFromPoint() を使用して下の要素を見つける必要があります。あなたの場合、2 つのボックス間でこれを実行し、包含要素にヒットするまで繰り返すことができます。広い領域と多数の要素がある場合、これはリソースを大量に消費する可能性があります。

とにかく一番上の要素を非表示にしたい状況でのみ使用しましたが、目に見える表示の歪みがあるかどうかをテストできます.

于 2012-05-10T23:36:37.730 に答える
0

WebKit と Opera の場合、次のように実行できます。

  • ドラッグ ハンドルの座標を取得する
  • ドラッグ ハンドルを非表示にする
  • document.caretPositionFromPoint(dragHandleX, dragHandleY)各ドラッグ ハンドルで呼び出す
  • 前の手順で取得した 2 つのキャレット位置 (それぞれがノードとそのノード内のオフセットで構成される) から新しい範囲を作成します。
  • この範囲を選択
  • ドラッグ ハンドルを表示する

Firefox では、マウス イベントに役立つプロパティがrangeParentありrangeOffsetますが、イベントが発生する前にドラッグ ハンドルを非表示にする必要があると思います。

IE では、次のようなことができます。

  • ドラッグ ハンドルの座標を取得する
  • ドラッグ ハンドルを非表示にする
  • を使用して、ドラッグ ハンドルごとに TextRange を作成します。document.body.createTextRange()
  • moveToPoint(dragHandleX, dragHandleY)各 TextRange で呼び出す
  • 次を使用して、最初の TextRange を 2 番目の TextRange で終了するように拡張しsetEndPoint()ます。firstTextRange.setEndPoint(secondTextRange)
  • この範囲を選択:firstTextRange.select()
  • ドラッグ ハンドルを表示する
于 2012-05-10T23:29:09.247 に答える