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

 

<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>
</body>
</html>

 

操作说明：

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

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

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

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

    

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

   • 单击【继续移动】可再次移动/复制选择的DIV
   • 单击【撤销移动】撤销本次操作，还原上一次移动/复制时的界面
   • 单击【确认移动】本次移动/复制完成，可通过第一步继续移动/复制