网站引擎-产品论坛-学习交流-网页设计交流-可以拖动的div方块(全部俺自己手写)-|企业级内容管理系统(CMS)|网站建设|管理|运营|WAP手机网站|建站软件|建站工具|建站系统--Powered By SiteEngine

一共有三个文件,俺觉得代码很垃圾,算法不够精练,兼容性又差,有高手的话,给俺改一改哈

。

//-----------------------------------------------------------------------------------
//-- divBox.js
//-----------------------------------------------------------------------------------
document.onmouseup=divBoxMouseUp;
document.onmousemove=divBoxMouseMove;
var divBoxIndex = 1; //层次数
var flag=false; //鼠标被按下的标志
var divBoxObject = ''; //记录当前拖动的对象名
var mouseX; //鼠标的x坐标
var mouseY; //鼠标的y坐标
var objectX; //拖动层的x坐标
var objectY; //拖动层的y坐标
function divBoxMouseDown(divBox) //鼠标按下时
{
divBoxObject = divBox;
flag = true;
mouseX = event.clientX;
mouseY = event.clientY;
eval("objectX = parseInt("+ divBoxObject +".style.left);");
eval("objectY = parseInt("+ divBoxObject +".style.top);");
divBoxIndex++;
eval(divBoxObject + ".style.zIndex = divBoxIndex;");
}
function divBoxMouseUp() //鼠标抬起时
{
flag = false;
}
function divBoxMouseMove() //鼠标移动时
{
if(flag)
{
eval(divBoxObject + ".style.left = objectX+(event.clientX-mouseX);"); //给拖动层重新定位
eval(divBoxObject + ".style.top = objectY+(event.clientY-mouseY);");
}
}
function showDivBox(divBoxName,divBoxStyle,divBoxX,divBoxY,divBoxWidth,divBoxHeight,divBoxCon)
{
divBoxIndex++;
document.write('

'+ divBoxCon +'

');
}

//-----------------------------------------------------------------------------------
//-- divBox.css
//-----------------------------------------------------------------------------------
/* CSS Document */
.divBox{
background-color:#0099FF;
color:#FFFFFF;
padding:20px;
text-align:center;
}
.divBox2{
background-color:#FFCC00;
}
.divBox3{
background-color:#FF0000;
}
body{
font-size:12px;
margin:0px;
}

//-----------------------------------------------------------------------------------
//-- divBox.html
//-----------------------------------------------------------------------------------

可拖动的层-作者刘斌