配合拖动页面中控件达到页面动态生成后页面的排版效果。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <title>窗体设计</title>

        <SCRIPT language="JavaScript" src="/cmsweb/script/jscommon.js"></SCRIPT>

JavaScript代码
        <script language="JavaScript">
<!--
/*
    代码说明:
    -、下面代码中的"xx"、"yy"是为移动元素所需的2个动态属性,分别记录移动前的X和Y坐标。
    -、主元素(主选择元素):第一个选中的元素;次元素(次选择元素):第二个开始选中的所有元素
*/

var IsDesignChanged=false
var IsDraging=false //判断是否处于拖动状态中
var xMouseBefMove, yMouseBefMove //移动元素前的鼠标X、Y坐标
var currentSelMainElement //当前选中的主元素(第一个选中的元素)
var currentDot //当前正移动(正改变主选择元素宽度高度)的定位点
var saveSign //保存类型:save, saveas
var arrElments = new Array() //保存所有次选择元素(第二个开始选中的元素)
var arrDots = new Array() //保存所有次选择元素的定位点

var g_pointSelTimes = 0//多选控件时判断第几次点击
var g_pointStartX = 0//多选控件的起点
var g_pointStartY = 0//多选控件的起点
var g_pointEndX = 0//多选控件的终点
var g_pointEndY = 0//多选控件的终点

document.onmousedown
=EvtMouseDown //定义鼠标点击的事件入口
document.onmouseup=EvtMouseUp //定义鼠标放开的事件入口
document.onkeydown=EvtKeyDown //定义键盘点击的事件入口
document.onmouseover=EvtMouseOver //定义鼠标移至的事件入口

//添加元素
function AddElement(){
    
try{
        IsDesignChanged
=true
        
//获取选择的字段
        var selIndex = document.all.item("ListBox1").selectedIndex;
        
if (selIndex == -1){
            alert(
"请选择合适的字段!");
            
return;
        }
        
var ctlDispName = document.all.item("ListBox1").options(selIndex).text;
        
var valType = GetCtrlValType(document.all.item("ListBox1").options(selIndex).value)
        
var ctlName = GetCtrlName(document.all.item("ListBox1").options(selIndex).value)
        
        
//创建Text元素
        var blnCreateLabel = 1;
        
if (valType == "1"){ //选择项
            var ctlText1 = document.createElement("<SELECT ctrltype='ddlist' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' id='" + ctlName + "' name='" + ctlName + "' style='Z-INDEX: 125; POSITION: absolute; HEIGHT: 20px; WIDTH: 90px;TOP:5px;LEFT:97px'> <OPTION selected></OPTION></SELECT>");
            panelForm.appendChild(ctlText1);
        }
else if (valType == "101"){ //是输入窗体设计中的多媒体型
            //创建文件上传控件元素
            var ctlFile1 = document.createElement("<INPUT ctrltype='image' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' type='file' id='" + ctlName + "' name='" + ctlName + "' dragSign='fileElement' disabled style='Z-INDEX: 103; POSITION: absolute; LEFT: 97px; TOP: 5px; WIDTH: 222px'>");
            panelForm.appendChild(ctlFile1);
        }
else if (valType == "102"){ //是打印窗体设计中的多媒体型
            var ctlImg1 = document.createElement("<IMG border=0 ctrltype='image' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' id='" + ctlName + "' name='" + ctlName + "' dragSign='frmElement'  style='Z-INDEX: 125; LEFT: 97px; POSITION: absolute; TOP: 5px; HEIGHT:80px; WIDTH:80px' alt='图片'>");
            panelForm.appendChild(ctlImg1);
        }
else if (valType == "100"){ //是打印窗体设计中的所有元素显示为Label
            var ctlLabel1 = document.createElement("<label ctrltype='TextboxInPrint' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' align='left' id='" + ctlName + "' name='" + ctlName + "' value='[" + ctlDispName + "]' style='POSITION: absolute; HEIGHT: 20px; WIDTH: 90px;top:9px;left:97px '></label>");
            ctlLabel1.innerText 
= "[" + ctlDispName + "]";
            panelForm.appendChild(ctlLabel1);
        }
else if (valType == "11"){ //多选一选择项
            var ctlText1 = document.createElement("<input ctrltype='radio' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' id='" + ctlName + "' name='" + ctlName + "' value='[" + ctlDispName + "]' readonly style='POSITION: absolute; HEIGHT: 45px; WIDTH: 400px;top:5px;left:97px'>");
            panelForm.appendChild(ctlText1);
            blnCreateLabel 
= 0//不显示Label
        }else if (valType == "13"){ //目录文件
            var ctlFile1 = document.createElement("<INPUT ctrltype='fileForDirFile' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' type='file' id='" + ctlName + "' name='" + ctlName + "' dragSign='fileElement' disabled style='Z-INDEX: 103; POSITION: absolute; LEFT: 97px; TOP: 5px; WIDTH: 222px'>");
            panelForm.appendChild(ctlFile1);
        }
else if (valType == "12"){ //是否选择项
            var ctlText1 = document.createElement("<input ctrltype='checkgrp' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' id='" + ctlName + "' name='" + ctlName + "' type='checkbox' disabled value='[" + ctlDispName + "]' style='POSITION: absolute; HEIGHT: 20px; WIDTH: 200px;top:5px;left:97px'>");
            panelForm.appendChild(ctlText1);
            blnCreateLabel 
= 0//不显示Label
        }else//if (valType == "0"){ //是输入型
            var ctlText1 = document.createElement("<input ctrltype='text' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' id='" + ctlName + "' name='" + ctlName + "' value='[" + ctlDispName + "]' readonly style='POSITION: absolute; HEIGHT: 20px; WIDTH: 90px;top:5px;left:97px'>");
            panelForm.appendChild(ctlText1);
        }

        
//创建Label元素
        if (blnCreateLabel==1){
            
//var lblName = "lbl" + ctlName;
            var lblName = "lbl_" + Math.round(Math.random() * 10000000000); // + "_" + ctlName;
            var strAlign = "right";
            
if (self.document.forms(0).formtype.value == 1){
                strAlign 
= "left";
            }
            
var ctlLabel1 = document.createElement("<label ctrltype='label' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' dragSign='frmElement' align='right' id='" + lblName + "' name='" + lblName + "' style='POSITION: absolute; HEIGHT: 20px; WIDTH: 56px;top:9px;left:32px;TEXT-ALIGN: " + strAlign + "'></label>");
            ctlLabel1.innerText 
= ctlDispName;
            panelForm.appendChild(ctlLabel1);
        }
    }
catch(ex){
    }
}

//获取窗体内所有元素的布局信息
function GetDFormLayout(){
    
//获取窗体本身布局信息
    var ctlInfo = ";;" + "1||" + "FORM_CONTAINER" + "||0||||" + panelForm.style.left + "||" + panelForm.style.top + "||" + panelForm.style.pixelWidth + "||" + panelForm.style.pixelHeight + "||||;;";

    
//获取窗体内所有元素的布局信息
    for (var i = 0; i < panelForm.all.length; i++){    
        
var ctlItem = panelForm.all.item(i);
        
var intHeight = ctlItem.style.pixelHeight;
        
if (ctlItem.style.display != "none" && ctlItem.name != null){ //不保存隐藏的元素
            if (ctlItem.ctrltype == "label"){
                
//2: 表示是标签Label
                ctlInfo = ctlInfo + "2||" + ctlItem.name + "||0||" + ctlItem.innerText + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
                ctlInfo 
= ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||;;";
            }
            
else if (ctlItem.ctrltype == "TextboxInPrint"){
                
//14: 所有元素在打印窗体中都显示为Label
                ctlInfo = ctlInfo + "14||" + ctlItem.name + "||0||" + ctlItem.innerText + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
                ctlInfo 
= ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||;;";
            }
            
else if (ctlItem.ctrltype == "text"){
                
//3: 表示是输入型元素(如Text)
                var ctlName = ctlItem.value
                ctlInfo 
= ctlInfo + "3||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlName + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
                ctlInfo 
= ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||" + ctlItem.ctrlbitian + "||;;";
            }
else if (ctlItem.ctrltype == "image"){
                
//4: 表示是Image图形控件
                ctlInfo = ctlInfo + "4||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            }
else if (ctlItem.ctrltype == "pageimg"){
                
//13: 表示是页面上的图形文件
                ctlInfo = ctlInfo + "13||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            
//}else if (ctlItem.ctrltype == "imagefile"){
            //    //4: 表示是Image图形控件
            //    ctlInfo = ctlInfo + "4||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            }else if (ctlItem.ctrltype == "imageForBinCol"){
                
//15: 二进制字段以图片方式显示
                ctlInfo = ctlInfo + "15||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            }
else if (ctlItem.ctrltype == "fileForDirFile"){
                
//18: 目录文件的文件控件
                ctlInfo = ctlInfo + "18||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            }
else if (ctlItem.ctrltype == "imageForDirFile"){
                
//17: 目录文件的图片显示
                ctlInfo = ctlInfo + "17||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            }
else if (ctlItem.ctrltype == "imageForUrlCol"){
                
//16: 二进制字段以图片方式显示
                ctlInfo = ctlInfo + "16||" + ctlItem.name + "||0||" + ctlItem.src + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            }
else if (ctlItem.ctrltype == "file"){
                
//5: 表示是File控件,文件上传控件
                ctlInfo = ctlInfo + "5||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlItem.value + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||||" + "||||;;";
            }
else if (ctlItem.ctrltype == "ddlist"){
                
//6: 表示是DropDownList
                var ctlName = ctlItem.value
                ctlInfo 
= ctlInfo + "6||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlName + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
                ctlInfo 
= ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||" + ctlItem.ctrlbitian + "||;;";
            }
else if (ctlItem.ctrltype == "line"){
                
//7: 表示是Line控件
                ctlInfo = ctlInfo + "7||" + ctlItem.name + "||0||" + "线条" + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            }
else if (ctlItem.ctrltype == "ResTable"){
                
//8: 表示是资源表单控件
                ctlInfo = ctlInfo + "8||" + ctlItem.name + "||0||" + ctlItem.tabresid + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||||;;";
            }
else if (ctlItem.ctrltype == "cmsbtn"){
                
//9: 表示是普通按钮
                ctlInfo = ctlInfo + "9||" + ctlItem.name + "||0||" + ctlItem.value + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||" + ctlItem.ctrlscript + "||;;";
            }
else if (ctlItem.ctrltype == "linkbtn"){
                
//10: 表示是普通链接
                if (ctlItem.innerText != ""){
                    ctlInfo 
= ctlInfo + "10||" + ctlItem.name + "||0||" + ctlItem.innerText + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||" + ctlItem.ctrlscript + "||;;";
                }
else{
                    ctlInfo 
= ctlInfo + "10||" + ctlItem.name + "||0||" + ctlItem.value + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + "||" + ctlItem.ctrlscript + "||;;";
                }
            }
else if (ctlItem.ctrltype == "radio"){
                
//11: 表示是多选一选择项
                var ctlName = ctlItem.value
                ctlInfo 
= ctlInfo + "11||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlName + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
                ctlInfo 
= ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||" + ctlItem.ctrlbitian + "||;;";
            }
else if (ctlItem.ctrltype == "checkgrp"){
                
//12: 表示是是否选择项
                var ctlName = ctlItem.value
                ctlInfo 
= ctlInfo + "12||" + ctlItem.name + "||" + ctlItem.ctrlreadonly + "||" + ctlName + "||" + ctlItem.style.left + "||" + ctlItem.style.top + "||" + ctlItem.style.pixelWidth + "||" + intHeight + "||" + ctlItem.style.textAlign + "||||";
                ctlInfo 
= ctlInfo + ctlItem.style.fontFamily + "||" + ctlItem.style.fontSize + "||" + ctlItem.style.color + "||" + ctlItem.style.fontWeight + "||" + ctlItem.style.fontStyle + "||" + ctlItem.style.textDecoration + "||" + ctlItem.ctrlbitian + "||;;";
            }
else{
                
//未知元素
            }
        }
    }
    
    
return ctlInfo;
}

//解析字段值类型
function GetCtrlValType(optValue){
    
var strTemp = new String(optValue);
    
var pos = strTemp.indexOf ("]"0)
    
return strTemp.substring(1, pos)
}

//解析字段名称
function GetCtrlName(optValue){
    
var strTemp = new String(optValue);
    
var pos = strTemp.indexOf ("]"0);
    
var curResID;
    
var relRes = document.all.item("ddlHostTables")
    
if (relRes == null){
        curResID 
= getUrlParam("mnuresid");
    }
else{
        curResID 
= relRes.options(relRes.selectedIndex).value;
        
if(curResID == ""){
            relRes 
= document.all.item("ddlSubTables")
            curResID 
= relRes.options(relRes.selectedIndex).value;
        }
else{
        }
    }
    
return "TAB" + curResID + "___" + strTemp.substring(pos+1);
}

function DoNothing(){
    
return false;
}

//元素水平对齐
function AlignHorizontal(){
    IsDesignChanged
=true
    
try{
        
//先计算需要对齐的高度位置,如果第一个选择的控件是Label,则高度-4,因为Label比Textbox低4个像素
        var posTop;
        
if (currentSelMainElement.ctrltype == "label"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop) - 4;
        }
else if (currentSelMainElement.ctrltype == "text"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "image"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "pageimg"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "imageForBinCol"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "imageForDirFile"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "imageForUrlCol"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "fileForDirFile"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        
//}else if (currentSelMainElement.ctrltype == "imagefile"){
        //    posTop = parseInt(currentSelMainElement.style.pixelTop);
        }else if (currentSelMainElement.ctrltype == "file"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "ddlist"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "TextboxInPrint"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "radio"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "checkgrp"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "ResTable"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "line"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "cmsbtn"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }
else if (currentSelMainElement.ctrltype == "linkbtn"){
            posTop 
= parseInt(currentSelMainElement.style.pixelTop);
        }

        
//对齐指定类型的控件
        for (var i=0; i<arrElments.length; i++){
            
if (arrElments[i].ctrltype == "label"){
                arrElments[i].style.pixelTop
=posTop + 4;
            }
else if (arrElments[i].ctrltype == "text"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "image"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "pageimg"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "imageForBinCol"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "imageForDirFile"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "imageForUrlCol"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "fileForDirFile"){
                arrElments[i].style.pixelTop
=posTop;
            
//}else if (arrElments[i].ctrltype == "imagefile"){
            //    arrElments[i].style.pixelTop=posTop;
            }else if (arrElments[i].ctrltype == "file"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "ddlist"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "TextboxInPrint"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "radio"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "checkgrp"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "ResTable"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "line"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "cmsbtn"){
                arrElments[i].style.pixelTop
=posTop;
            }
else if (arrElments[i].ctrltype == "linkbtn"){
                arrElments[i].style.pixelTop
=posTop;
            }
        }
    }
catch(ex){
    }

    
/*
    清除所有选中元素相关的参数
    将来改进:不清除所有选中元素相关的参数,但是需要同时移动所有定位点,以便于用户对齐后的一起移动操作
    
*/
    
//Hide4Dots(); //隐藏主元素的4个定位点
    //DeleteDynamicAddedDots(); //移除动态添加显示的定位点
    //ClearSelElementArray(); //移除所有元素的选择,其实是从全局数组中移除
}

//元素左对齐
function AlignLeft(){
    IsDesignChanged
=true
    
try{
        
var pos = parseInt(currentSelMainElement.style.pixelLeft);
        
for (var i=0; i<arrElments.length; i++){
            arrElments[i].style.pixelLeft
=pos;
        }
    }
catch(ex){
    }

    
/*
    清除所有选中元素相关的参数
    将来改进:不清除所有选中元素相关的参数,但是需要同时移动所有定位点,以便于用户对齐后的一起移动操作
    
*/
    
//Hide4Dots(); //隐藏主元素的4个定位点
    //DeleteDynamicAddedDots(); //移除动态添加显示的定位点
    //ClearSelElementArray(); //移除所有元素的选择,其实是从全局数组中移除
}

//元素右对齐
function AlignRight(){
    IsDesignChanged
=true
    
try{
        
var pos = parseInt(currentSelMainElement.style.pixelLeft) + parseInt(currentSelMainElement.style.pixelWidth);
        
for (var i=0; i<arrElments.length; i++){
            arrElments[i].style.pixelLeft
=pos - parseInt(arrElments[i].style.pixelWidth)
        }
    }
catch(ex){
    }

    
/*
    清除所有选中元素相关的参数
    将来改进:不清除所有选中元素相关的参数,但是需要同时移动所有定位点,以便于用户对齐后的一起移动操作
    
*/
    
//Hide4Dots(); //隐藏主元素的4个定位点
    //DeleteDynamicAddedDots(); //移除动态添加显示的定位点
    //ClearSelElementArray(); //移除所有元素的选择,其实是从全局数组中移除
}

//宽度对齐
function AlignWidth(){
    IsDesignChanged
=true
    
try{
        
var pos = parseInt(currentSelMainElement.style.pixelWidth);
        
for (var i=0; i<arrElments.length; i++){
            arrElments[i].style.pixelWidth
=pos;
        }
    }
catch(ex){
    }

    
/*
    清除所有选中元素相关的参数
    将来改进:不清除所有选中元素相关的参数,但是需要同时移动所有定位点,以便于用户对齐后的一起移动操作
    
*/
    
//Hide4Dots(); //隐藏主元素的4个定位点
    //DeleteDynamicAddedDots(); //移除动态添加显示的定位点
    //ClearSelElementArray(); //移除所有元素的选择,其实是从全局数组中移除
}

//高度对齐
function AlignHeight(){
    IsDesignChanged
=true
    
try{
        
var pos = parseInt(currentSelMainElement.style.pixelHeight);
        
if (pos<=0){
            pos 
= 20//有些元素无法获取高度,默认为20pixel
        }
        
for (var i=0; i<arrElments.length; i++){
            arrElments[i].style.pixelHeight
=pos;
        }
    }
catch(ex){
    }

    
/*
    清除所有选中元素相关的参数
    将来改进:不清除所有选中元素相关的参数,但是需要同时移动所有定位点,以便于用户对齐后的一起移动操作
    
*/
    
//Hide4Dots(); //隐藏主元素的4个定位点
    //DeleteDynamicAddedDots(); //移除动态添加显示的定位点
    //ClearSelElementArray(); //移除所有元素的选择,其实是从全局数组中移除
}

//元素内部文字左对齐
function TextAlignLeft(){
    IsDesignChanged
=true
    
try{
        
if (currentSelMainElement != null){
            currentSelMainElement.style.textAlign 
= "left"
        }
        
for (var i=0; i<arrElments.length; i++){
            arrElments[i].style.textAlign 
= "left"
        }
    }
catch(ex){
    }
}

//元素内部文字右对齐
function TextAlignRight(){
    IsDesignChanged
=true
    
try{
        
if (currentSelMainElement != null){
            currentSelMainElement.style.textAlign 
= "right"
        }
        
for (var i=0; i<arrElments.length; i++){
            arrElments[i].style.textAlign 
= "right"
        }
    }
catch(ex){
    }
}

//元素内部文字居中对齐
function TextAlignCenter(){
    IsDesignChanged
=true
    
try{
        
if (currentSelMainElement != null){
            currentSelMainElement.style.textAlign 
= "center"
        }
        
for (var i=0; i<arrElments.length; i++){
            arrElments[i].style.textAlign 
= "center"
        }
    }
catch(ex){
    }
}

//鼠标Over事件入口
function EvtMouseOver(){
    
try{
        
if (event.srcElement.dragSign=="frmElement"){
            event.srcElement.style.cursor 
= "move"//鼠标移至元素上时显示“鼠标移动”标志
        }
    }
catch(ex){
    }
}

//键盘击键的事件响应入口
function EvtKeyDown(){
    
try{
        
if (event.keyCode == 46){ //键盘Del键
            IsDesignChanged=true
            DeleteElement();
        }
    }
catch(ex){
    }
}

//放开鼠标的事件入口
function EvtMouseUp(){
    
try{
        
if (IsDraging == false){
            
return;
        }
        
        IsDraging
=false
        
        
//定位主选择元素
        currentSelMainElement.xx = currentSelMainElement.style.pixelLeft
        currentSelMainElement.yy 
= currentSelMainElement.style.pixelTop

        
//定位主选择元素的4个定位点
        frmInputDesign.left_mid.xx = frmInputDesign.left_mid.style.pixelLeft
        frmInputDesign.left_mid.yy 
= frmInputDesign.left_mid.style.pixelTop
        frmInputDesign.middle_top.xx 
= frmInputDesign.middle_top.style.pixelLeft
        frmInputDesign.middle_top.yy 
= frmInputDesign.middle_top.style.pixelTop
        frmInputDesign.middle_bot.xx 
= frmInputDesign.middle_bot.style.pixelLeft
        frmInputDesign.middle_bot.yy 
= frmInputDesign.middle_bot.style.pixelTop
        frmInputDesign.right_mid.xx 
= frmInputDesign.right_mid.style.pixelLeft
        frmInputDesign.right_mid.yy 
= frmInputDesign.right_mid.style.pixelTop

        
//定位所有次选择元素    
        for (var i=0; i < arrElments.length; i++){
            arrElments[i].xx 
= arrElments[i].style.pixelLeft
            arrElments[i].yy 
= arrElments[i].style.pixelTop
        }

        
//定位所有次选择元素的定位点    
        for (var i=0; i < arrDots.length; i++){
            arrDots[i].xx 
= arrDots[i].style.pixelLeft
            arrDots[i].yy 
= arrDots[i].style.pixelTop
        }

        
//显示当前选中的元素的位置
        if (currentSelMainElement != null){
            
//document.all.item("lblStatus1").innerText = "元素宽:" + currentSelMainElement.style.pixelWidth + " 高:" + currentSelMainElement.style.pixelHeight + " x:" + currentSelMainElement.style.pixelLeft + " y:" + currentSelMainElement.style.pixelTop
        }
    }
catch(ex){
    }
}

//添加标签元素
function AddElementLabel(){
    IsDesignChanged
=true
    
var lblValue = window.prompt("请输入标签显示内容:""");
    
if (lblValue == null){
        
return//用户点击了“取消”
    }

    
var ctlName = "lbl" + Math.round(Math.random() * 10000000000);
    
var ctlLabel1 = document.createElement("<label ctrltype='label' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' id='" + ctlName + "' name='" + ctlName + "' dragSign='frmElement' readonly style='POSITION: absolute; HEIGHT: 20px; WIDTH: 65px;top:5px;left:97px '></label>");
    ctlLabel1.innerText 
= lblValue;
    panelForm.appendChild(ctlLabel1);
    
return false;
}

//添加"文件上传控件"元素
function AddElementFile(){
    IsDesignChanged
=true;
    
var ctlName = "CmsFile" + Math.round(Math.random() * 10000000000);
    
var ctlFile1 = document.createElement("<INPUT ctrltype='file' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' type='file' id='" + ctlName + "' name='" + ctlName + "' dragSign='fileElement' disabled style='Z-INDEX: 103; POSITION: absolute; LEFT: 97px; TOP: 5px; WIDTH: 222px'>");
    panelForm.appendChild(ctlFile1);
    
return true;
}

function AddElementButton(){
    IsDesignChanged
=true
    
var btnValue = window.prompt("请输入按钮名称:""");
    
if (btnValue == null){
        
return//用户点击了“取消”
    }

    
var ctlName = "cmsbtn" + Math.round(Math.random() * 10000000000);
    
var ctlBtn = document.createElement("<INPUT type=button value=" + btnValue + " ctrltype='cmsbtn' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' id='" + ctlName + "' name='" + ctlName + "' dragSign='frmElement' readonly style='POSITION: absolute; HEIGHT: 20px; WIDTH: 65px;top:5px;left:97px'>");
    panelForm.appendChild(ctlBtn);
    
return false;
}

function AddElementLinkbtn(){
    IsDesignChanged
=true
    
var btnValue = window.prompt("请输入链接名称:""");
    
if (btnValue == null){
        
return//用户点击了“取消”
    }

    
var ctlName = "linkbtn" + Math.round(Math.random() * 10000000000);
    
var ctlBtn = document.createElement("<INPUT type=button value=" + btnValue + " ctrltype='linkbtn' ctrlscript='' ctrlreadonly='0' ctrlbitian='0' id='" + ctlName + "' name='" + ctlName + "' dragSign='frmElement' readonly style='POSITION: absolute; HEIGHT: 20px; WIDTH: 65px;top:5px;left:97px'>");
    
//var ctlBtn = document.createElement("<a id='" + ctlName + "' style='POSITION: absolute; HEIGHT: 20px; WIDTH: 65px;top:5px;left:97px'>" + btnValue + "</a>");
    panelForm.appendChild(ctlBtn);
    
return false;
}

function AddElementScript(){
    IsDesignChanged
=true;
    
try{
        
if (currentSelMainElement == null){
            
return false;
        }

        
var rtnVal = window.showModalDialog("/cmsweb/cmsform/FormSetElementScript.aspx?ctrlscript=" + currentSelMainElement.ctrlscript, "_blank""dialogHeight:430px; dialogWidth:580px; center;yes");
        
var strRtn = new String(rtnVal);
        currentSelMainElement.ctrlscript 
= strRtn;
        
//if (strRtn != ""){
        //    var pos1 = strRtn.indexOf("$PROPNAME", 0)
        //    var pos2 = strRtn.indexOf("$PROPVAL", 0)
        //    if (pos1 >= 0 && pos2 >= 0){
        //        var strPropName = strRtn.substring(pos1+10, pos2)
        //        var strPropValue = strRtn.substring(pos2+9)
        //        currentSelMainElement.ctrlscript = strPropValue;
        //    }
        //}
    }catch(ex){
        alert(
"请选择有效的控件!");
    }
}

function SetFormProperty(){
    
//IsDesignChanged=true;
    try{
        
//获取当前资源ID
        //window.showModalDialog("/cmsweb/cmsform/FormSetProperty.aspx?mnures>script>
 1 <div id="panelForm" style="border-width:1px;border-style:solid;height:148px;width:512px;Z-INDEX: 103; LEFT: 160px; POSITION: absolute; TOP: 136px">
 2 
 3                 <IMG id="left_mid" style="DISPLAY: none; WIDTH: 6px; CURSOR: w-resize; POSITION: absolute; HEIGHT: 6px"
 4                     height="6" src="images/dot.jpg" width="6" name="left_mid" dragSign="left_mid">
 5                 <IMG id="middle_top" style="DISPLAY: none; WIDTH: 6px; CURSOR: n-resize; POSITION: absolute; HEIGHT: 6px"
 6                     height="6" src="images/dot.jpg" width="6" name="middle_top" dragSign="middle_top">
 7                 <IMG id="middle_bot" style="DISPLAY: none; WIDTH: 6px; CURSOR: s-resize; POSITION: absolute; HEIGHT: 6px"
 8                     height="6" src="images/dot.jpg" width="6" name="middle_bot" dragSign="middle_bot">
 9                 <IMG id="right_mid" style="DISPLAY: none; WIDTH: 6px; CURSOR: e-resize; POSITION: absolute; HEIGHT: 6px"
10                     height="6" src="images/dot.jpg" width="6" name="right_mid" dragSign="right_mid">
11                 <span id="lbl_314291914783" name="lbl_314291914783" dragSign="frmElement" ctrltype="label" ctrlreadonly="0" ctrlbitian="0" style="POSITION: absolute; HEIGHT: 20px; WIDTH: 56px;top:24px;left:10px;">文件上传</span><input name="TAB309435499140___CmsFileDoc" id="TAB309435499140___CmsFileDoc" type="file" dragSign="fileElement" ctrltype="file" ctrlreadonly="0" ctrlbitian="0" style="POSITION: absolute; HEIGHT: 20px; WIDTH: 400px;top:20px;left:72px;" disabled="disabled" /><span id="Span1" name="lbl_314291914814" dragSign="frmElement" ctrltype="label" ctrlreadonly="0" ctrlbitian="0" style="POSITION: absolute; HEIGHT: 20px; WIDTH: 56px;top:46px;left:10px; TEXT-ALIGN: right;FONT-SIZE: 12px;">编号</span><input name="TAB309435499140___FLOWCODE" type="text" value="[编号]" id="TAB309435499140___FLOWCODE" tabindex="-1" dragSign="frmElement" ctrltype="text" ctrlreadonly="0" ctrlbitian="0" maxLength="20" readOnly="true" style="POSITION: absolute; HEIGHT: 20px; WIDTH: 400px;top:42px;left:72px; TEXT-ALIGN: left;FONT-SIZE: 12px;" /><span id="Span2" name="lbl_314291914846" dragSign="frmElement" ctrltype="label" ctrlreadonly="0" ctrlbitian="0" style="POSITION: absolute; HEIGHT: 20px; WIDTH: 56px;top:68px;left:10px; TEXT-ALIGN: right;FONT-SIZE: 12px;">关键字</span><input name="TAB309435499140___DOC2_KEYWORDS" type="text" value="[关键字]" id="TAB309435499140___DOC2_KEYWORDS" tabindex="-1" dragSign="frmElement" ctrltype="text" ctrlreadonly="0" ctrlbitian="0" maxLength="200" readOnly="true" style="POSITION: absolute; HEIGHT: 20px; WIDTH: 400px;top:64px;left:72px; TEXT-ALIGN: left;FONT-SIZE: 12px;" /><span id="Span3" name="lbl_314291914877" dragSign="frmElement" ctrltype="label" ctrlreadonly="0" ctrlbitian="0" style="POSITION: absolute; HEIGHT: 20px; WIDTH: 56px;top:90px;left:10px; TEXT-ALIGN: right;FONT-SIZE: 12px;">备注</span><input name="TAB309435499140___DOC2_COMMENTS" type="text" value="[备注]" id="TAB309435499140___DOC2_COMMENTS" tabindex="-1" dragSign="frmElement" ctrltype="text" ctrlreadonly="0" ctrlbitian="0" maxLength="200" readOnly="true" style="POSITION: absolute; HEIGHT: 20px; WIDTH: 400px;top:86px;left:72px; TEXT-ALIGN: left;FONT-SIZE: 12px;" />
12 </div>

</form>
    </body>
</HTML> 

 

 

 

效果图如下:

配合JavaScript拖动页面中控件 

鼠标移上去选中相应控件即可拖动,如操作窗体控件一样方便。

相关文章:

  • 2021-10-25
  • 2022-02-09
  • 2022-12-23
  • 2022-01-14
  • 2021-08-17
猜你喜欢
  • 2022-01-26
  • 2021-10-19
  • 2021-08-27
  • 2022-02-06
  • 2021-09-30
  • 2021-09-01
相关资源
相似解决方案