从Javascript中的选定区域获取元素

我需要在Javascript中实现从选定区域获取元素。这是在chrome应用程序中创建一个更好的类似桌面的UI所必需的。最近的例子是在Imgur扩展中选择区域：

因此，问题是：

如何在javascript中完成此选择

如何从该选择中获取元素

---

单击按钮后，此代码将从文本区域进行take ur选择

<script language=javascript>
function getSelText()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
            }
    else return;
document.aform.selectedtext.value =  txt;
}
</script>
<input type="button" value="Get selection" onmousedown="getSelText()"> 
<form name=aform >
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>

函数getSelText（）
{
var-txt=''；
if（window.getSelection）
    {
txt=window.getSelection（）；
             }
else if（document.getSelection）
    {
txt=document.getSelection（）；
            }
else if（文档选择）
    {
txt=document.selection.createRange（）.text；
            }
否则返回；
document.aform.selectedtext.value=txt；
}

我发现这很有趣，所以我使用jQuery从头开始做了一些东西，因为否则它会变得太复杂：

我希望它足够直截了当，请问一下你是否有什么想知道的

它基本上归结为检查每个元素的矩形是否封装了它

$("#start_select").click(function() {
    $("#select_canvas").show();
});

$('*').bind('selectstart', false);

var start = null;
var ctx = $("#select_canvas").get(0).getContext('2d');
ctx.globalAlpha = 0.5;

$("#select_canvas").mousedown(function(e) {
    start = [e.offsetX, e.offsetY];

}).mouseup(function(e) {
    end = [e.offsetX, e.offsetY];

    var x1 = Math.min(start[0], end[0]),
        x2 = Math.max(start[0], end[0]),
        y1 = Math.min(start[1], end[1]),
        y2 = Math.max(start[1], end[1]);

    var grabbed = [];
    $('*').each(function() {
        if(!$(this).is(":visible")) return;

        var o = $(this).offset(),
            x = o.left,
            y = o.top,
            w = $(this).width(),
            h = $(this).height();

        if(x > x1 && x + w < x2 && y > y1 && y + h < y2) {
            grabbed.push(this);
        }
    });
    console.log(grabbed);

    start = null;

    $(this).hide();

}).mousemove(function(e) {
    if(!start) return;

    ctx.clearRect(0, 0, this.offsetWidth, this.offsetHeight);
    ctx.beginPath();

    var x = e.offsetX,
        y = e.offsetY;

    ctx.rect(start[0], start[1], x - start[0], y - start[1]);
    ctx.fill();
});

$（“#开始_选择”）。单击（函数（）{
$（“选择画布”）.show（）；
});
$（'*'）.bind（'selectstart'，false）；
var start=null；
var ctx=$（“#选择画布”）.get（0.getContext（'2d'）；
ctx.globalAlpha=0.5；
$（“选择画布”）.mousedown（函数（e）{
开始=[e.offsetX，e.offsetY]；
}).mouseup（函数（e）{
end=[e.offsetX，e.offsetY]；
var x1=数学最小值（开始[0]，结束[0]），
x2=数学最大值（开始[0]，结束[0]），
y1=数学最小值（开始[1]，结束[1]），
y2=数学最大值（开始[1]，结束[1]）；
var=[]；
$（'*'）。每个（函数（）{
如果（！$（this）.is（“：visible”））返回；
var o=$（this）.offset（），
x=o左，
y=o.top，
w=$（this）.width（），
h=$（this）.height（）；
如果（x>x1&&x+wy1&&y+h

这用于输入/text区域选择。我不需要这个。检查我需要的屏幕截图。由于您正在标记

imgur

和

canvas

，您是在寻找一种方法来制作屏幕截图还是在所选区域内获取元素数组？下面是一个使用jQuery UI用鼠标拖出一个框的示例：。然后，我猜您必须遍历DOM中最外层的每个元素，检查它们的边界坐标，如果它们位于拖动区域，则检查它们的所有子元素&c。直到找到仍在拖动边界区域内且没有子元素的图元，然后将其添加到选定集。这并不简单。这可能也有帮助：@pimvdb我猜使用canvas是实现选择区域的方法。一种在选定区域内获取元素数组的方法-没错。。。我在想这个。唯一的问题是它可能太慢了。无论如何，这似乎是目前最好的解决方案。谢谢。YUI对此有一个答案，尽管我认为您可能仍然会因为大量的DOM拖网捕鱼而导致性能问题。。。也许值得。。。YUI2的getRegion（）、union（）和intersect（）方法很好地封装了require逻辑：-YUI3版本可能更棒。。。但我经常使用YUI2，而且它们效率高、可靠。