如何使用javascript選擇視口中兩點之間的所有內容？

我需要找到一種方法來選擇視圖端口中兩點之間的所有內容。我需要這個選擇來交叉HTML元素。如何使用javascript選擇視口中兩點之間的所有內容？

考慮一個帶有兩個可移動框的頁面。這些框由用戶圍繞內容移動。它們絕對位於所有內容前面的屏幕上。當這些框被移動時，我需要選擇它們之間的所有內容。有人遇到過類似的東西嗎？我本質上想要做的是模仿智能手機選擇手柄。

我知道有一個JavaScript函數document.elementFromPoint（x，y）。在這種情況下這將不起作用，因爲這些框將被選作該點的最頂層元素。

來源

2012-05-10 smokingoyster

哪個瀏覽器？ –

具體是android os web視圖。幸運的是，我有一個非常有限的特定範圍的目標。 – smokingoyster

噢，那是我的答案的三分之二，這對你沒有任何幫助:) –

對於WebKit和歌劇，你可以這樣做如下：

讓您拖的座標處理
隱藏拖拽手柄上的每個拖
呼叫document.caretPositionFromPoint(dragHandleX, dragHandleY)處理
創建從前面步驟中獲得的兩個插入位置（每個由節點和該節點內的偏移組成）的新範圍
選擇此範圍
取消隱藏你的拖拽手柄

在Firefox中，鼠標事件有rangeParent和rangeOffset特性，可以幫助，但我認爲你需要以某種方式隱藏事件觸發前的拖動手柄。

在IE中，你可以做這樣的事情：

讓您拖的座標處理
隱藏拖拽手柄
使用document.body.createTextRange()
電話每次拖動手柄創建一個TextRange moveToPoint(dragHandleX, dragHandleY)對每個TextRange
使用setEndPoint()擴展第一個TextRange以在第二個TextRange結束：firstTextRange.setEndPoint(secondTextRange)
選擇此範圍：firstTextRange.select()
取消隱藏你的拖拽手柄

來源

2012-05-10 23:29:09

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); 
})

與您喜愛的遞歸基於回調的DOM遍歷的方法更換$(".")如果你不想要的jQuery。

來源

2012-05-10 23:22:42 ninjagecko

從它的聲音可能會更好跟蹤元素的定位自己，並計算出該元素會從你的JavaScript代碼中被觸及。這會減少你與DOM的交互。

如果不是我聽說過或用於從別人後面得到元素的唯一方法在這裏詳細描述： http://www.vinylfox.com/forwarding-mouse-events-through-layers/

它主要涉及隱藏了暫時接收原始元素的元素，然後用elementFromPoint（）找到下面的元素。在你的情況下，你可以在你的兩個盒子之間執行這個操作，然後重複，直到你打開包含元素如果你有一個大面積和大量的元素，這可能是太激烈了。

我只是在我想要隱藏頂部元素的情況下使用它，但是您可以測試它以查看是否存在可見的顯示失真。

來源

2012-05-10 23:36:37

如何使用javascript選擇視口中兩點之間的所有內容？

回答

相關問題