Getting elements from selected area in Javascript

Question

I need to implement getting elements from selected area in Javascript. This is needed to make a better, desktop-like UI in chrome app. The nearest example is selecting area in Imgur extension:

So the question is:

How this selecting can be done in javascript?
How to get elements from this selection?

Since you're tagging `imgur` and `canvas`, are you looking for a way to make a screenshot or a way to get an array of elements within the selected region? — pimvdb, Aug 14 '11 at 12:22
Here's an example of dragging out a box with the mouse, using jQuery UI I think: http://jsbin.com/aqowa. Then I guess you'd have to loop through each of the outermost elements in the DOM, check their bounding coordinates, and if they are in the dragged area, check all their children, &c. until you find elements with no children that are still within the dragged bounding area, and then add them to the selected set. Not gonna be simple. — Robin Winslow, Aug 14 '11 at 19:40
This may also help: http://motyar.blogspot.com/2010/02/draw-rectangle-with-jquery.html — Robin Winslow, Aug 14 '11 at 19:42
@pimvdb i just guess that using canvas is the way to implement selecting area. _a way to get an array of elements within the selected region_ - that's right — Dmitrii Sorin, Aug 14 '11 at 21:39

score 4 · Accepted Answer · answered Aug 14 '11 at 22:13

I found this interesting so I made something from scratch, using jQuery because it would become too complicated otherwise: http://jsfiddle.net/EuSBU/1/.

I hope it's straight-forward enough to follow, please ask if there is something you want to know.

It basically comes down to checking for each element whether the rectangle is encapsulating it.

$("#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();
});

hm... i was thinking about this. the only problem is that it can be too slow. anyway, this seems to be the best solution right now. thank you. — Dmitrii Sorin, Aug 15 '11 at 05:43
YUI has an answer to this, though I think you'd probably still end up having performance woes for the large amount of DOM trawling... may be worthwhile though... YUI2's getRegion(), union() and intersect() methods encapsulate the require logic nicely: http://developer.yahoo.com/yui/docs/YAHOO.util.Region.html#method_getRegion - YUI3 version is probably more awesome... but I use the YUI2 ones fairly often and they're efficient and reliable. — danjah, Oct 01 '11 at 11:47

score -3 · Answer 2 · answered Aug 14 '11 at 07:42

This code will make take ur selection from the text area once you click on the button.

<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>

this is for inputs/textarea selecting. i don't need this. Check screenshot for what i need. — Dmitrii Sorin, Aug 14 '11 at 09:52

Getting elements from selected area in Javascript

2 Answers2