dex

<html>
<head>
<script type="text/javascript">
window.onload = init;
function RubberDown(e){
if(!e) e = window.event;
if(e.target.tagName == "HTML" || e.target.tagName == "BODY" || e.target.id == "rubberallow"){
RubberProc(e);
} else {
DragProc(e);
}
}
function RubberProc(e){
div = document.createElement('div');
div.id = "rubberdiv";
div.className = "rubberdiv";
div.style.top = e.clientY;
div.style.left = e.clientX;
document.body.appendChild(div);
x = e.clientX;
y = e.clientY;
drag = true;
document.onmousemove = RubberMove;
}
function RubberMove(e){
if(drag){
div.style.width = e.clientX - x;
div.style.height = e.clientY - y;
selcels = getElementsByClassName(document, "*", "selectme");
for(i=0;i<selcels.length;i++){
//if(selcels[i].offsetTop > y && selcels[i].offsetLeft > x && selcels[i].offsetTop < e.clientX && selcels[i].offsetLeft < e.clientX){
//if(selcels[i].offsetTop > y || selcels[i].offsetLeft > x || selcels[i].offsetTop < e.clientX || selcels[i].offsetLeft < e.clientX){
//if(selcels[i].offsetTop > y && selcels[i].offsetLeft > x || parseInt(selcels[i].offsetLeft + selcels[i].offsetWidth) > x && parseInt(selcels[i].offsetTop + selcels[i].offsetHeight) > y){
//if(selcels[i].offsetTop > y && selcels[i].offsetLeft > x && selcels[i].offsetTop < e.clientX && selcels[i].offsetLeft < e.clientX){
if(
selcels[i].offsetTop > y 
&& 
selcels[i].offsetLeft > x 
&& 
selcels[i].offsetTop + selcels[i].offsetHeight < e.clientX 
&& 
selcels[i].offsetLeft + selcels[i].offsetWidth < e.clientX){
selcels[i].style.border = "1px solid";
alert(selcels[i].getAttribute("identifier"));
//alert(selcels[i].offsetWidth + selcels[i].offsetLeft);
}
}
}
}
function DragProc(e){
element = e.target || e.srcElement;
if(element.id == "draggable"){
x = e.clientX;
y = e.clientY;
tx = parseInt(element.style.left + 0,10);
ty = parseInt(element.style.top + 0,10);
drag = true;
}
document.onmousemove = DragMove;
}
function DragMove(e){
if(!e) e = window.event;
if(drag){
element.style.top = ty + e.clientY - y;
element.style.left = tx + e.clientX - x;
}
return false;
}
function termAll(e){
if(!e) e = window.event;
drag = false;
// just for removing the div
if(document.body.lastChild.className == "rubberdiv"){
document.body.removeChild(div);
} else {
return;
}
}
function init(e){
if(!e) e = window.event;
drag = false;
document.onmousedown = RubberDown;
document.onmouseup = termAll;
}
function getElementsByClassName(oElm, strTagName, oClassNames){
  // Function by Robert Nyman, http://www.robertnyman.com/
  var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
  var arrReturnElements = new Array();
  var arrRegExpClassNames = new Array();
  if(typeof oClassNames == "object")
    for(var i=0; i<oClassNames.length; i++)
      arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
  else
    arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
  var oElement;
  var bMatchesAll;
  for(var j=0; j<arrElements.length; j++){
    oElement = arrElements[j];
    bMatchesAll = true;
    for(var k=0; k<arrRegExpClassNames.length; k++)
      if(!arrRegExpClassNames[k].test(oElement.className)) {
        bMatchesAll = false;
        break; 
      }
    if(bMatchesAll)
      arrReturnElements.push(oElement);
  }
  return (arrReturnElements);
}
window.alert = function(what){
document.getElementById("alertfield").innerHTML = what;
}
</script>
<style type="text/css">
.rubberdiv {
position: absolute;
border: 1px dotted;
background-image: url('bandbg-blue.png');
}
.bgdiv {
background-color: red;
-moz-opacity: 0.2
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;" class="rubberdiv" id="draggable"></div>
<div style="width: 100px;height: 100px;border: 1px dotted;left: 200px;position: absolute;" class="selectme" identifier="box0"></div>
<div style="width: 100px;height: 100px;border: 1px dotted;left: 500px;position: absolute;" class="selectme" identifier="box1" id="rubberallow"></div>
<div style="width: 100px;height: 100px;border: 1px dotted;left: 800px;position: absolute;" class="selectme" identifier="box2" id="rubberallow"></div>
<div id="alertfield"></div>
</body>
</html>