javascriptを使用してビューポート内の2点間のすべてのコンテンツを選択するにはどうすればよいですか？

Question

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

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

私は、javascript関数document.elementFromPoint（x、y）があることを知っています。この場合、ボックスはそのポイントの一番上の要素として選択されるため、これは機能しません。

Answer 1

次のように、あなたがこれを行うことができます：

• はあなたのドラッグの座標を取得するには、
• をドラッグ
• 作成を扱う各ドラッグに
• コールdocument.caretPositionFromPoint(dragHandleX, dragHandleY)を扱う隠す扱い前の手順で取得した2つのキャレット位置（各ノードとそのノード内のオフセットで構成される）の新しい範囲
• この範囲を選択
• あなたのドラッグを再表示は、Firefoxで

を扱う私はあなたが何とかドラッグイベントが発生する前にハンドルを非表示にする必要があると思うけれども、マウスイベントは、役立つかもしれrangeParentとrangeOffset特性を有しています。 IEで

、あなたはこのような何か行うことができます：

• あなたのドラッグの座標は
• を扱う取得をドラッグ
• document.body.createTextRange()
• コールを使用して、各ドラッグハンドルのためのTextRangeの作成を扱う隠します各テキスト範囲のmoveToPoint(dragHandleX, dragHandleY)
• setEndPoint()：firstTextRange.setEndPoint(secondTextRange)を使用して、2番目のTextRangeで終了する最初のTextRangeを拡張します
• は、この範囲を選択：firstTextRange.select()
• 再表示あなたのドラッグは、素子のトラックを自分で位置を維持し、あなたのjavascriptのコード内から触れられると思われる要素を計算する方が良いかもしれませんそれの音から

Answer 2

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のトラバーサルのお好みの方法で$(".")を交換してください。

のWebKitとオペラのために

Answer 3

を処理します。これにより、DOMとのやり取りが減少します。

ない場合は私が聞いたことや他の人の後ろから要素を取得するために使用されてきた唯一の方法は、ここで詳述されている： http://www.vinylfox.com/forwarding-mouse-events-through-layers/

をそれは、本質的に、その後のelementFromPointを使用して、一時的に元の要素を受け取る要素を隠す必要（）以下の要素を見つける。あなたの場合、あなたの2つのボックスの間でこれを実行し、あなたが含まれている要素を打つまで繰り返すことができます。大規模な領域と多数の要素がある場合は、これはリソースが強すぎるかもしれません。

とにかく先頭の要素を非表示にしたい場合にのみ使用しましたが、表示可能な表示の歪みがないかどうかテストすることができます。