历时1个工作日多一点。。基本能满足需要。。。
因为考虑到跨浏览器和一些之后的ajax操作,所以用了dojo包。。。想看实际效果的,还需要自己配置一个dojo的环境。。。
因为考虑到跨浏览器和一些之后的ajax操作,所以用了dojo包。。。想看实际效果的,还需要自己配置一个dojo的环境。。。
<html>
<head>
<title></title>
<script type="text/javascript" src="../JS/dojo/dojo.js"></script>
</head>
<body>
<script>
dojo.require("dojo.html.*");
var divs = new Array();
var move=false;
var x = 0;
var y = 0;
var divId = "";
var onMove=false;
var selDivId = "";
function O(div) {
this.id = div.id;
this.x = dojo.html.getAbsoluteX(div, null);
this.y = dojo.html.getAbsoluteY(div, null);
this.width = dojo.html.getBorderBoxWidth(div);
this.height = dojo.html.getBorderBoxHeight(div);
}
function initFileDivsPosition() {
for(var i = 1; i <= 12; i++) {
var div = dojo.byId("div_" + i);
var obj = new O(div);
divs.push(obj);
}
}
function initFileDivsBG() {
var ids = selDivId.split(",");
for(var i = 0; i < ids.length - 1; i++) {
//alert(ids[i]);
dojo.byId(ids[i]).style.backgroundColor = "red";
}
}
function isTouch(dragObj, tmpObj) {
var lx = dragObj.x - tmpObj.width;
var rx = parseInt(dragObj.x) + parseInt(dragObj.width);
var ty = dragObj.y - tmpObj.height;
var by = parseInt(dragObj.y) + parseInt(dragObj.height);
//alert(lx + "=" + rx + "=" + ty + "=" + by + "\n" + dragDivX + "=" + dragDivY);
if((tmpObj.x > lx && tmpObj.x < rx) && (tmpObj.y > ty && tmpObj.y < by)) {
return true;
} else {
return false;
}
}
function isContain(dragObj, tmpObj) {
if((tmpObj.x > dragObj.x && (tmpObj.x - dragObj.x + tmpObj.width) < dragObj.width)
&& (tmpObj.y > dragObj.y && (tmpObj.y - dragObj.y + tmpObj.height) < dragObj.height)) {
return true;
} else {
return false;
}
}
function touchDiv(div) {
var dragObj = new O(div);
for(var i = 0; i < divs.length; i++) {
var tmpObj = divs[i];
if(isTouch(dragObj, tmpObj)) {
//alert(nowObj.x + "---" + leftX + "---" + rightX + "|||" + nowObj.y + "---" + topY + "---" + bottomY);
//alert(tmpObj.id);
dojo.byId(tmpObj.id).style.backgroundColor = "blue";
if(selDivId.indexOf(tmpObj.id + ",") == -1) {
selDivId = selDivId + tmpObj.id + ",";
}
//return tmpObj.id;
} else {
dojo.byId(tmpObj.id).style.backgroundColor = "red";
selDivId.replace(tmpObj.id, "");
//return tmpObj.id;
}
}
//return 0;
}
function startDrag(e) {
initFileDivsPosition();
initFileDivsBG();
selDivId = "";
dojo.event.connect(dojo.byId("div_main"), "onmousemove", "drag");
if(dojo.render.html.ie) {
if(e.button == 1) {
var dragDiv = dojo.byId("div_dragging");
x = e.clientX;
y = e.clientY;
dragDiv.style.left = x;
dragDiv.style.top = y;
move=true;
onMove = true;
}
} else {
if(e.button == 0) {
var dragDiv = dojo.byId("div_dragging");
x = e.clientX;
y = e.clientY;
dragDiv.style.left = e.clientX;
dragDiv.style.top = e.clientY;
move=true;
onMove = true;
}
}
}
function drag(e) {
if(move) {
var dragDiv = dojo.byId("div_dragging");
if(e.clientX - x >= 0) {
dragDiv.style.width = e.clientX - dragDiv.style.left.replace("px","");
dragDiv.style.left = x;
} else {
dragDiv.style.width = x - e.clientX;
dragDiv.style.left = e.clientX;
}
if(e.clientY - y >= 0) {
dragDiv.style.height = e.clientY - dragDiv.style.top.replace("px","");
dragDiv.style.top = y;
} else {
dragDiv.style.height = y - e.clientY;
dragDiv.style.top = e.clientY;
}
dragDiv.style.display = "block";
touchDiv(dragDiv);
}
}
function stopDrag(e) {
//touchDiv(dojo.byId("div_dragging"));
if(dojo.render.html.ie) {
if(e.button == 1) {
var dragDiv = dojo.byId("div_dragging");
var lt = dragDiv.style.left.replace("px","") + "," + dragDiv.style.top.replace("px","");
var lb = dragDiv.style.left.replace("px","") + "," + (parseInt(dragDiv.style.top.replace("px","")) + parseInt(dragDiv.style.height.replace("px","")));
var rt = (parseInt(dragDiv.style.left.replace("px","")) + parseInt(dragDiv.style.width.replace("px",""))) + "," + dragDiv.style.top.replace("px","");
var rb = (parseInt(dragDiv.style.left.replace("px","")) + parseInt(dragDiv.style.width.replace("px",""))) + "," + (parseInt(dragDiv.style.top.replace("px","")) + parseInt(dragDiv.style.height.replace("px","")));
//alert("左上:(" + lt + ")右上:(" + rt + ")\n左下:(" + lb + ")右下:(" + rb + ")");
dragDiv.style.display = "none";
dragDiv.style.width = "0px";
dragDiv.style.height = "0px";
x = 0;
y = 0;
move=false;
onMove = false;
}
} else {
if(e.button == 0) {
var dragDiv = dojo.byId("div_dragging");
var lt = dragDiv.style.left.replace("px","") + "," + dragDiv.style.top.replace("px","");
var lb = dragDiv.style.left.replace("px","") + "," + (parseInt(dragDiv.style.top.replace("px","")) + parseInt(dragDiv.style.height.replace("px","")));
var rt = (parseInt(dragDiv.style.left.replace("px","")) + parseInt(dragDiv.style.width.replace("px",""))) + "," + dragDiv.style.top.replace("px","");
var rb = (parseInt(dragDiv.style.left.replace("px","")) + parseInt(dragDiv.style.width.replace("px",""))) + "," + (parseInt(dragDiv.style.top.replace("px","")) + parseInt(dragDiv.style.height.replace("px","")));
//alert("左上:(" + lt + ")右上:(" + rt + ")\n左下:(" + lb + ")右下:(" + rb + ")");
dragDiv.style.display = "none";
dragDiv.style.width = "0px";
dragDiv.style.height = "0px";
x = 0;
y = 0;
move=false;
onMove = false;
}
}
dojo.event.disconnect(dojo.byId("div_main"), "onmousemove", "drag");
alert(selDivId);
}
</script>
<div id="div_main" style="width:30%; height:50%; background-color:#eeeeee;" onmousedown="startDrag(event)" onmouseup="stopDrag(event)">
<div id="div_1" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_2" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_3" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_4" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_5" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_6" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_7" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_8" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_9" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_10" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_11" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_12" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
<div id="div_dragging" style="position:absolute; left:0px; top:0px; width:0px; height:0px; border:1px solid #000000; display:none; z-index:99; overflow:hidden;"></div>
</div>
</body>
</html>