dex

<html>
<head>
<script type="text/javascript">
dragrp = false;
window.onload = init;
function RubberDown(e){
if(!e) e = window.event;
els = getElementsByAttribute("selected", "true");
//for(var i=0;i<els.length;i++){
//els[i].setAttribute("selected", "false");
//}
if(els.length < 1){

} else {
DragGrp(e);
}
if(e.target.tagName.toLowerCase() == "html" || e.target.tagName.toLowerCase() == "body" || e.target.getAttribute("rubberallow") == "true"){
RubberProc(e);
} else {
DragProc(e);
}
}
function DragGrp(e){
elem = getElementsByAttribute("selected", "true");
xc = e.clientX;
yc = e.clientY;
for(var i=0;i<elem.length;i++){
tx = parseInt(elem[i].style.left, 10);
ty = parseInt(elem[i].style.top, 10);
}
dragrp = true;
document.onmousemove = function(e){
if(dragrp){
for(var i=0;i<elem.length;i++){
elem[i].style.top = ty + e.clientY - y;
elem[i].style.left = tx + e.clientX - x;
}
}
}
}
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");
selcels = getElementsByAttribute("selected", "false");
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";
selcels[i].setAttribute("selected", "true");
//alert(selcels[i].getAttribute("identifier"));
//alert(selcels[i].offsetWidth + selcels[i].offsetLeft);
}
}
}
}
function DragProc(e){
element = e.target || e.srcElement;
if(element.getAttribute("drag") == "true"){
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;
dragrp = false;
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);
}
function getElementsByAttribute(attr, val){ 
	var arr = new Array(); 
	var elems = document.getElementsByTagName("*");
	for(var attbr, i = 0;(elem = elems[i]);i++){
		if(elem.getAttribute(attr) == val){
			arr[arr.length] = elem;
		}
	}
	return arr;
}
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
}
*[selected=true] {
border: 1px solid;
}
*[selected=false] {
border: 1px dotted;
}
.rubberdiv2 {
position: absolute;
background-image: url('bandbg-red.png');
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;" class="rubberdiv" drag="true" selected="false"></div>
<div style="width: 100px;height: 100px;" class="rubberdiv2" drag="true" selected="false"></div>
<div style="width: 100px;height: 100px;left: 200px;position: absolute;" selected="false" identifier="box0"></div>
<div style="width: 100px;height: 100px;left: 500px;position: absolute;" selected="false" identifier="box1" rubberallow="true"></div>
<div style="width: 100px;height: 100px;left: 800px;position: absolute;" selected="false" identifier="box2" rubberallow="true"></div>
<div id="alertfield"></div>
</body>
</html>