纯JS控制DIV选择范围移动与复制

最新推荐文章于 2023-02-03 20:25:43 发布

原创最新推荐文章于 2023-02-03 20:25:43 发布 · 4.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #null #border #javascript #html

本文介绍一种使用纯JavaScript实现的DIV元素选择与移动功能。通过拖拽虚线框来选择页面上的多个DIV，选中后可通过拖动半透明复制层进行移动或复制，并附带确认与撤销操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

<title>纯JS控制DIV选择范围移动与复制</title>

</head>

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>

</body>

</html>

操作说明：

按住左键拖动出现虚线选择框
虚线选择框经过DIV时，被选中的DIV边框会变粗变色，此时代表此DIV被选中;
虚线选择框离开DIV时，DIV边框变回原来样式，此时代表此DIV未被选中
择需要移动或复制的DIV，释放鼠标左键后出现选择按钮框，有【确定选择】、【继续选择】、【重新选择】三个选项
- 单击【继续选择】可在原来选择的DIV数量基础上继续选择，此时选择框离开原来选择的DIV原选择DIV也处在选择状态下
- 单击【重新选择】前面所选择的所有DIV将恢复未选择状态
- 单击【确认选择】后选择完成，此时鼠标图标变成移动图标按住左键拖动，此时被选择的DIV会复制出半透明的层随着鼠标移动而移动
在想移动的目的地或复制的目的地释放鼠标左键，产生一段过度动画，如果未按住CTRL将把原位置移动到新位置，按住则复制一个DIV到新位置
动画结束后，出现选择按钮框，有【确定移动】、【继续移动】、【撤销移动】三个选项
- 单击【继续移动】可再次移动/复制选择的DIV
- 单击【撤销移动】撤销本次操作，还原上一次移动/复制时的界面
- 单击【确认移动】本次移动/复制完成，可通过第一步继续移动/复制