海泰首页
欢迎 Guest   | 登录   
  搜索  

 论坛公告: [最新好消息:]   1、海泰公司网站隆重登场!   2、海泰公司论坛正式启用!  
  海泰首页  | 论坛首页  | 所有讨论区  | 最新话题  | 看谁在线上  | 使用者列表  | 注册新使用者  | 搜索  | RSS 广播


快速链接 »
话题状态: 一般
此话题中所有文章数: 1
[收藏此话题] [查看此话题] [发表新话题]
作者
上一话题 此文章已经查看 1679 次 而且有 0 篇回复 下一话题
帅哥 gigawing
新手上路



注册日期: 2008-5-31
文章: 16
状态: 离线

【转】 纯JS控制DIV选择范围移动与复制 回复此篇文章
引言回复

原帖地址 http://blog.csdn.net/pippe/article/details/2095984

<html>
<head>
<title>纯JS控制DIV选择范围移动与复制</title>
</head>
<body onselectstart="return false">
<script language="javascript" type="text/javascript">
var copyNo = 0;
var eventType = "nothing"; //"nothing"无事件,"selecting"选择中,"isSelected"选择判断中,"keepSelect"继续选择,"keepSelecting"继续选择中,"selected"确认选择,"move"移动中, "isMoved"继续移动,"moved"确认移动,"keepMove"继续移动, "reMove"重新移动
var oX,oY,nX,nY;
var oLeft,oTop;
var selectDiv;
var cloneDiv;
var borderArea;
var changeDiv;
var oTime;

//创建DIV
function createDiv(divID, divLeft, divTop)
{
var div = document.createElement("div");
div.id = divID;
div.group = "divGroup";
div.selectBorder = "#996600 3px solid";
div.noSelectBorder = "#000000 1px solid";
div.isSelect = false;
div.style.cssText = "width: 250px; height: 50px; left: " + divLeft + "; top: " + divTop + "; border: #000000 1px solid; text-align: center; position: absolute; background-color: #f5f5f5";
div.innerHTML = "<table style="width: 100%; height: 100%; text-align: center; vertical-align: middle"><tr><td>coding by pippe<br /><a href='mailto:pippe@163.com'>pippe@163.com</a></td></tr>";
document.body.appendChild(div);
}

createDiv("oldDiv1", "100px", "400px");
createDiv("oldDiv2", "400px", "400px");
createDiv("oldDiv3", "700px", "400px");

//左键按下事件
function eventDown()
{
//左键
if (event.button == 1)
{
oX = document.body.scrollLeft + event.clientX;
oY = document.body.scrollTop + event.clientY;
switch(eventType)
{
case "nothing":
//初次选择
case "keepSelect":
//继续选择
eventType = eventType == "nothing" ? "selecting" : "keepSelecting";
borderArea = document.createElement("div");
borderArea.id = "borderArea";
borderArea.style.left = oX + "px";
borderArea.style.top = oY + "px";
borderArea.style.position = "absolute";
borderArea.style.border = "#FF7700 1PX dotted";
document.body.appendChild(borderArea);
break;
case "selected":
var len = selectDiv.length;
cloneDiv = new Array();
oLeft = new Array();
oTop = new Array();
for (var i = 0; i < len; i++)
{
cloneDiv = selectDiv.cloneNode(true);
cloneDiv.style.filter = "alpha(opacity=50)";
oLeft = parseInt(cloneDiv.style.left);
oTop = parseInt(cloneDiv.style.top);
document.body.appendChild(cloneDiv);
cloneDiv.setCapture();
}
eventType = "move";
break;
}
}
}

//拖动事件
function eventMove()
{
if (event.button == 1)
{
nX = document.body.scrollLeft + event.clientX;
nY = document.body.scrollTop + event.clientY;
//选择范围
switch (eventType)
{
case "selecting":
//初次选择
case "keepSelecting":
//继续选择
borderArea.style.left = nX <= oX ? nX + "px" : oX + "px";
borderArea.style.top = nY <= oY ? nY + "px" : oY + "px";
borderArea.style.width = nX >= oX ? nX - oX : oX - nX;
borderArea.style.height = nY >= oY ? nY - oY : oY - nY;

var theDivs = document.getElementsByTagName("div");
var len = theDivs.length;
var thisLeft, thisTop, thisRight, thirBottom;
var x1,y1,x2,y2;
x2 = nX <= oX ? oX : nX;
x1 = nX <= oX ? nX : oX;
y2 = nY <= oY ? oY : nY;
y1 = nY <= oY ? nY : oY;
for (var i = 0; i < len; i++)
{
if (theDivs.group != "divGroup")
{
continue;
}
thisLeft = parseInt(theDivs.style.left);
thisRight = thisLeft + parseInt(theDivs.style.width);
thisTop = parseInt(theDivs.style.top);
thisBottom = thisTop + parseInt(theDivs.style.height);
//判断是否在选择框范围内
if ((((thisLeft > x1 && thisLeft < x2) || (thisRight > x1 && thisRight < x2)) && ((thisTop > y1 && thisTop < y2) || (thisBottom > y1 && thisBottom < y2)))
|| (((x1 > thisLeft && x1 < thisRight) || (x2 > thisLeft && x2 < thisRight)) && ((y1 > thisTop && y1 < thisBottom) || (y2 > thisTop && y2 < thisBottom))))
{
if (theDivs.isSelect == false)
{
theDivs.style.border = theDivs.selectBorder;
theDivs.isSelect = true;
}
}
else if (theDivs.isSelect == true)
{
if (eventType == "selecting")
{
//初次选择
theDivs.style.border = theDivs.noSelectBorder;
theDivs.isSelect = false;
}
else
{
//继续选择中
var len = selectDiv.length;
var isTrue = false;
for (var j = 0; j < len; j++)
{
if (theDivs.isSelect == true && theDivs == selectDiv[j])
{
isTrue = true;
//break;
}
}
if (!isTrue)
{
theDivs.style.border = theDivs.noSelectBorder;
theDivs.isSelect = false;
}
}
}
}
break;
case "move":
//移动中
var len = cloneDiv.length;
for (var i = 0; i < len; i++)
{
cloneDiv.style.left = (oLeft + nX - oX) + "px";
cloneDiv.style.top = (oTop + nY - oY) + "px";
}
break;
}
}
}

//拖移结束
function eventUp()
{
nX = document.body.scrollLeft + event.clientX;
nY = document.body.scrollTop + event.clientY;
//选择范围
switch(eventType)
{
case "selecting":
//初次选择
case "keepSelecting":
//继续选择
if (borderArea)
{
document.body.removeChild(borderArea);
borderArea = null;
}

//存储选中的DIV
var divs = document.getElementsByTagName("div");
var len = divs.length;
var count = 0;
selectDiv = new Array();
for(var i = 0; i < len; i++)
{
if (divs.group == "divGroup" && divs.isSelect == true)
{
selectDiv[count] = divs;
count++;
}
}
//有选中
if (count > 0)
{
eventType = "isSelected";
createChange();
}
else
{
eventType = "nothing";
}

break;
case "move":
//移动结束(左键松开)
eventType = "";
var len = cloneDiv.length;
var aimLeft, aimTop;
for (var i = 0; i < len; i++)
{
cloneDiv.releaseCapture();
aimLeft = parseInt(cloneDiv.style.left);
aimTop = parseInt(cloneDiv.style.top);
event.ctrlKey ? cloneDiv.style.left = selectDiv.style.left : null;
event.ctrlKey ? cloneDiv.style.top = selectDiv.style.top : null;
move(i, aimLeft, aimTop, event.ctrlKey);
}
break;
case "nothing":
//恢复初始化
default:
break;
}
}

//移动的动画
function move(divIndex, aimLeft, aimTop, isCtrlKey)
{
var moveSize = 30;
var nowLeft, nowTop;
if (!isCtrlKey)
{
//未按住CTRL移动
nowLeft = parseInt(selectDiv[divIndex].style.left);
nowTop = parseInt(selectDiv[divIndex].style.top);
if (nowLeft > aimLeft + moveSize || nowLeft < aimLeft - moveSize || nowTop > aimTop + moveSize || nowTop < aimTop - moveSize)
{
selectDiv[divIndex].style.left = aimLeft > nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft < nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
selectDiv[divIndex].style.top = aimTop > nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop < nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
oTime = setTimeout("move(" + divIndex + ", " + aimLeft + ", " + aimTop + ", " + isCtrlKey + ")", 1);
}
else
{
selectDiv[divIndex].style.left = aimLeft;
selectDiv[divIndex].style.top = aimTop;
cloneDiv[divIndex].parentNode.removeChild(cloneDiv[divIndex]);
eventType = "isMoved";
createChange();
}
}
else
{
//按住CTRL复制
nowLeft = parseInt(cloneDiv[divIndex].style.left);
nowTop = parseInt(cloneDiv[divIndex].style.top);
if (nowLeft > aimLeft + moveSize || nowLeft < aimLeft - moveSize || nowTop > aimTop + moveSize || nowTop < aimTop - moveSize)
{
cloneDiv[divIndex].style.left = aimLeft > nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft < nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
cloneDiv[divIndex].style.top = aimTop > nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop < nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
oTime = setTimeout("move(" + divIndex + ", " + aimLeft + ", " + aimTop + ", " + isCtrlKey + ")", 1);
}
else
{
cloneDiv[divIndex].style.left = aimLeft;
cloneDiv[divIndex].style.top = aimTop;
copyNo++;
cloneDiv[divIndex].id = "copyDiv" + copyNo;
cloneDiv[divIndex].style.border = cloneDiv[divIndex].noSelectBorder;
cloneDiv[divIndex].isSelect = false;
cloneDiv[divIndex].style.filter = null;
cloneDiv[divIndex].innerHTML = cloneDiv[divIndex].id;
eventType = "isMoved";
createChange();
}
}
}

//创建提示框
function createChange()
{
if (!changeDiv)
{
changeDiv = document.createElement("div");
changeDiv.style.cssText = "width: 0px; height: 0px; position: absolute; border: #038585 1px solid; background-color: #EBFFFF;";
changeDiv.style.left = nX + "px"
changeDiv.style.top = nY + "px"
document.body.appendChild(changeDiv);
scrollTo(nX, nY);
setChange();
}
}

//设置提示框
function setChange()
{
var thisWidth = parseInt(changeDiv.style.width);
var thisHeight = parseInt(changeDiv.style.height);
if (thisWidth < 300 || thisHeight < 100)
{
changeDiv.style.width = thisWidth < 300 ? thisWidth + 25 + "px" : "300px";
changeDiv.style.height = thisHeight < 100 ? thisHeight + 25 + "px" : "100px";
setTimeout("setChange()", 1);
}
else
{
switch(eventType)
{
case "isSelected":
var titleDiv = document.createElement("div");
titleDiv.style.cssText = "width: 100%; height: 20px; background-color: #17C7C7; text-align: center; margin: 1px";
titleDiv.innerHTML = "<span style='height: 100%; color: #012828; margin-top: 5px'>确认选择?</span>";
changeDiv.appendChild(titleDiv);
createBtn("selected", "确定选择", "20px");
createBtn("keepSelect", "继续选择", "110px");
createBtn("nothing", "重新选择", "200px");
break;
case "isMoved":
var titleDiv = document.createElement("div");
titleDiv.style.cssText = "width: 100%; height: 20px; background-color: #17C7C7; text-align: center; margin: 1px";
titleDiv.innerHTML = "<span style='height: 100%; color: #012828; margin-top: 5px'>确认移动?</span>";
changeDiv.appendChild(titleDiv);
createBtn("moved", "确定移动", "20px");
createBtn("keepMove", "继续移动", "110px");
createBtn("reMove", "撤销移动", "200px");
break;
}
}
}

//创建按钮
function createBtn(changeType, btnText, theLeft)
{
var bgColor1 = "#89E3E4", bgColor2 = "#FFA76D";
var color1 = "#113E3F", color2 = "#381701";
var bdColor1 = "#256162", bdColor2 = "#7F3A0C";
var newDiv = document.createElement("div");
newDiv.style.cssText = "left: " + theLeft + "; top: 45px; width: 80px; height: 20px; position: absolute; background-color: " + bgColor1 + "; text-align: center; margin: 1px; color: " + color1 + "; border: " + bdColor1 + " 1px solid; cursor: pointer";
newDiv.innerHTML = "<span style='height: 100%; text-align: center; margin-top: 5px' onselectstart='return false'>" + btnText + "</span>";
newDiv.setAttribute("onmouseover", function(){this.style.backgroundColor = bgColor2; this.style.color = color2; this.style.borderColor = bdColor2});
newDiv.setAttribute("onmouseout", function(){this.style.backgroundColor = bgColor1; this.style.color = color1; this.style.borderColor = bdColor1});
newDiv.setAttribute("onclick", function(){setEventType(changeType);});
changeDiv.appendChild(newDiv);
}

//变更eventType
function setEventType(changeType)
{
eventType = changeType;
changeDiv ? document.body.removeChild(changeDiv) : null;
changeDiv = null;
switch(changeType)
{
case "selected":
document.body.style.cursor = "move";
break;
case "keepMove":
eventType = "selected";
break;
case "reMove":
var len = selectDiv.length;
for (var i = 0; i < len; i++)
{
selectDiv.style.left = oLeft + "px";
selectDiv.style.top = oTop + "px";
if (cloneDiv)
{
cloneDiv.parentNode.removeChild(cloneDiv);
}
}
eventType = "selected";
break;
case "moved":
case "nothing":
var len = selectDiv.length;
for (var i = 0; i < len; i++)
{
selectDiv.style.border = selectDiv.noSelectBorder;
selectDiv.isSelect = false;
if (cloneDiv && cloneDiv)
{
cloneDiv.style.border = cloneDiv.noSelectBorder;
cloneDiv.isSelect = false;
}
}
if (eventType != "nothing")
{
eventType = "nothing";
document.body.style.cursor = "default";
}
break;
}
}

document.onmousedown = eventDown;
document.onmousemove = eventMove;
document.onmouseup = eventUp;
</script>
</body>
</html>


操作说明:

按住左键拖动出现虚线选择框

虚线选择框经过DIV时,被选中的DIV边框会变粗变色,此时代表此DIV被选中;
虚线选择框离开DIV时,DIV边框变回原来样式,此时代表此DIV未被选中

择需要移动或复制的DIV,释放鼠标左键后出现选择按钮框,有【确定选择】、【继续选择】、【重新选择】三个选项

单击【继续选择】可在原来选择的DIV数量基础上继续选择,此时选择框离开原来选择的DIV原选择DIV也处在选择状态下
单击【重新选择】前面所选择的所有DIV将恢复未选择状态
单击【确认选择】后选择完成,此时鼠标图标变成移动图标 按住左键拖动,此时被选择的DIV会复制出半透明的层随着鼠标移动而移动


在想移动的目的地或复制的目的地释放鼠标左键,产生一段过度动画,如果未按住CTRL将把原位置移动到新位置,按住则复制一个DIV到新位置
动画结束后,出现选择按钮框,有【确定移动】、【继续移动】、【撤销移动】三个选项

单击【继续移动】可再次移动/复制选择的DIV
单击【撤销移动】撤销本次操作,还原上一次移动/复制时的界面
单击【确认移动】本次移动/复制完成,可通过第一步继续移动/复制
[2012-8-21 15:28:41] 友善打印        传送私人讯息    访客无法查看 [返回此篇文章顶端 ] 回复文章前,请先登录!  回到顶端 
[显示可以打印的版本] [发表新话题]