This code is not tested so much, and is little slow. It is only a test, but it works. Requires PROTOTYPE.JS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Prova di selezione rettangolo</title> <script src="prototype.js" type="text/javascript"></script> <script> Event.observe(document,"mousedown",MouseDown); Event.observe(document,"mouseup",MouseUp); Event.observe(document,"mousemove",MouseMove); var x1 = -1; var y1 = -1; var w = 0; var h = 0; var make = false; var shift = false; function MouseDown(e) { $('mouse').innerHTML = "mousedown"; x1 = Event.pointerX( e ); y1 = Event.pointerY( e ); $('box').setStyle({top:y1+"px",left:x1+"px",width: w+"px",height:h+"px"}); make = true; } function MouseUp(e) { $('mouse').innerHTML = "mouseup"; make = false; w = 1; h = 1; } function MouseMove(e) { var x2 = Event.pointerX( e ); var y2 = Event.pointerY( e ); var l = x1; var t = y1; $('pointer').innerHTML = "X1: "+x1+" -- X2: "+x2+" -- Y1: "+y1+" -- Y2: "+y2; if (x1 > -1 && make == true) { var x2 = Event.pointerX( e ); var y2 = Event.pointerY( e ); if (x2 < x1) { l = x2; x2 = x1; } if (y2 < y1) { var t = y2; y2 = y1; } var w = (x2 - l); var h = (y2 - t); $('box').setStyle({top:t+"px",left:l+"px",width:w+"px",height:h+"px"}); } pippo = $$('div.pippo'); var rect = $('box'); var n = pippo.size(); $('rectc').innerHTML = ''; $('rectc').innerHTML += Position.cumulativeOffset(rect)+" -- "; for (var i = 0;i<n;i++) { var el = $(pippo[i].id); var xy = Position.cumulativeOffset(el); var elx1 = xy[0]; var ely1 = xy[1]; var xy = el.getDimensions(); var elx2 = elx1 + xy.height; var ely2 = ely1 + xy.width; $('rectc').innerHTML += "x1: "+elx1+" x2: "+elx2+" y1:"+ely1+" y2: "+ely2; if (Position.within(rect,elx1,ely1) || Position.within(rect,elx2,ely1) || Position.within(rect,elx1,ely2) || Position.within(rect,elx2,ely2)) { $('rectc').innerHTML += "true"; $(el).setStyle({backgroundColor:'red'}); } else { $('rectc').innerHTML += " -- false"; $(el).setStyle({backgroundColor:'transparent'}); } $('rectc').innerHTML += ' <<>> '; } } </script> </head> <body> <div id="debug_container" style="border: 1px red solid"> <div id="mouse"></div> <div id="pointer"></div> <div id="pippoc"></div> <div id="rectc"></div> </div> <div id="box" style="border: 1px green solid; position: absolute;z-Index: 1000"></div> <div id="pippo" class="pippo" style="position:absolute;left:200px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div> <div id="pippo2" class="pippo" style="position:absolute;left:300px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div> <div id="pippo3" class="pippo" style="position:absolute;left:400px;top:200px;width:100px;height:100px;border: 2px blue solid" onclick="pippoClick(this)"></div> </body> </html>
