首页
微信
安卓
接口
移动
前端
专题
文档库
工具
网址
§
ITPOW
>>
文档
>>
JavaScript
>>
控件
纯 JS 控制 DIV 选择范围移动与复制
作者: 来源: 日期:2008-5-3
<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[i] = selectDiv[i].cloneNode(true); cloneDiv[i].style.filter = "alpha(opacity=50)"; oLeft[i] = parseInt(cloneDiv[i].style.left); oTop[i] = parseInt(cloneDiv[i].style.top); document.body.appendChild(cloneDiv[i]); cloneDiv[i].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[i].group != "divGroup") { continue; } thisLeft = parseInt(theDivs[i].style.left); thisRight = thisLeft + parseInt(theDivs[i].style.width); thisTop = parseInt(theDivs[i].style.top); thisBottom = thisTop + parseInt(theDivs[i].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[i].isSelect == false) { theDivs[i].style.border = theDivs[i].selectBorder; theDivs[i].isSelect = true; } } else if (theDivs[i].isSelect == true) { if (eventType == "selecting") { //初次选择 theDivs[i].style.border = theDivs[i].noSelectBorder; theDivs[i].isSelect = false; } else { //继续选择中 var len = selectDiv.length; var isTrue = false; for (var j = 0; j < len; j++) { if (theDivs[i].isSelect == true && theDivs[i] == selectDiv[j]) { isTrue = true; //break; } } if (!isTrue) { theDivs[i].style.border = theDivs[i].noSelectBorder; theDivs[i].isSelect = false; } } } } break; case "move": //移动中 var len = cloneDiv.length; for (var i = 0; i < len; i++) { cloneDiv[i].style.left = (oLeft[i] + nX - oX) + "px"; cloneDiv[i].style.top = (oTop[i] + 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[i].group == "divGroup" && divs[i].isSelect == true) { selectDiv[count] = divs[i]; 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[i].releaseCapture(); aimLeft = parseInt(cloneDiv[i].style.left); aimTop = parseInt(cloneDiv[i].style.top); event.ctrlKey ? cloneDiv[i].style.left = selectDiv[i].style.left : null; event.ctrlKey ? cloneDiv[i].style.top = selectDiv[i].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[i].style.left = oLeft[i] + "px"; selectDiv[i].style.top = oTop[i] + "px"; if (cloneDiv[i]) { cloneDiv[i].parentNode.removeChild(cloneDiv[i]); } } eventType = "selected"; break; case "moved": case "nothing": var len = selectDiv.length; for (var i = 0; i < len; i++) { selectDiv[i].style.border = selectDiv[i].noSelectBorder; selectDiv[i].isSelect = false; if (cloneDiv && cloneDiv[i]) { cloneDiv[i].style.border = cloneDiv[i].noSelectBorder; cloneDiv[i].isSelect = false; } } if (eventType != "nothing") { eventType = "nothing"; document.body.style.cursor = "default"; } break; } } document.onmousedown = eventDown; document.onmousemove = eventMove; document.onmouseup = eventUp; </script> <p style="font-weight: bold">操作说明:</p> <ol> <li> <p>按住左键拖动出现虚线选择框</p> </li> <li> <p>虚线选择框经过DIV时,被选中的DIV边框会变粗变色,此时代表此DIV被选中;<br /> 虚线选择框离开DIV时,DIV边框变回原来样式,此时代表此DIV未被选中</p> </li> <li> <p>择需要移动或复制的DIV,释放鼠标左键后出现选择按钮框,有【确定选择】、【继续选择】、【重新选择】三个选项 <ul> <li> 单击【继续选择】可在原来选择的DIV数量基础上继续选择,此时选择框离开原来选择的DIV原选择DIV也处在选择状态下 </li> <li> 单击【重新选择】前面所选择的所有DIV将恢复未选择状态 </li> <li> 单击【确认选择】后选择完成,此时鼠标图标变成移动图标 </li> </ul> </p> </li> <li> <p>按住左键拖动,此时被选择的DIV会复制出半透明的层随着鼠标移动而移动</p> </li> <li> <p>在想移动的目的地或复制的目的地释放鼠标左键,产生一段过度动画,如果未按住CTRL将把原位置移动到新位置,按住则复制一个DIV到新位置<br /> 动画结束后,出现选择按钮框,有【确定移动】、【继续移动】、【撤销移动】三个选项 <ul> <li> 单击【继续移动】可再次移动/复制选择的DIV </li> <li> 单击【撤销移动】撤销本次操作,还原上一次移动/复制时的界面 </li> <li> 单击【确认移动】本次移动/复制完成,可通过第一步继续移动/复制 </li> </ul> </p> </li> </ol> </body> </html>
[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]
相关文章
创建于2005年
渝ICP备05010272号-1
电邮:
cftea@126.com
即将跳转...