How do I code a GUI Selection Box?

Question

I want to build into my app a way to select multiple objects on the screen (this is an HTML page with a bunch of absolutely positioned HTML divs). You know, like when you click down with the mouse and drag a transparent/translucent box and anything within that box gets selected upon mouse release?

I don't know how to go about coding that. How would you? Or pointers to solutions is acceptable as well.

Answer 1

Consider using jQuery javascript library. It has an extension jQuery UI that provides abstractions for interaction and animation. For drag an drop you have: Draggable

Answer 2

Here is what I would do.

Mousedown creates a high z-index div, transparent body with a nice border, which has its dimensions informed by mousemove. On mouseup you compare the region of that div with applicable elements. This wouldn't be particularly hard to do without a library, but YUI3 makes it pretty simple, have a look at http://developer.yahoo.com/yui/3/api/Node.html#method_inRegion

HTH.