CSS代码

复制代码代码如下所示：



{ *

保证金：0px；

填料：0px；

微软雅黑字体：

字体大小：15px；

}

div {

宽度：50px；

身高：50px；

背景：# F00；

边界半径：5px；

-moz边界半径：5px；

WebKit的边界半径：5px；

光标：指针；

位置：绝对；

上图：60px；

左：30px；

}

输入{

位置：绝对；

上图：10px；

左：10px；

填料：3px；

光标：指针；

}





HTML代码

复制代码代码如下所示：











Javaｓｃｒｉｐｔ代码

复制代码代码如下所示：



1，单击鼠标并单击div作为开始。

2，单击鼠标移动以触发鼠标移动以向数组中注入数据（移动坐标）

3，从div到结束的鼠标的结束

4，单击原始的返回按钮，遍历数组（移动的坐标）来触发数组中的坐标移动div以实现返回函数。

窗口。指针函数（）{

无功odiv = document.getelementsbytagname（div）{ 0 }；

VaR的OBTN = document.getelementsbytagname（输入）{ 0 }；

VAR时间= null，arrtop = { }，arrleft = { }；

ODiv。onmousedown =功能（EV）{

风险事件= EV window.event | |；

在div中获取鼠标坐标

VaR disx = event.clientx-odiv.offsetleft；

VaR Disy = event.clienty-odiv.offsettop；

arrtop = { 60 }；

arrleft = { 30 }；

文件。移动鼠标=功能（EV）{

风险事件= EV window.event | |；

鼠标在获取位置后拖动。

var = event.clientx；

var t = event.clienty；

拖放位置后存入数组，用鼠标位置减去鼠标拖动物体后的位置，拖动物体的位置是

ArrLeft.push（l-disx）；

ArrTop.push（t-disy）；

ODiv。风格。左= l-disx +PX；

ODiv。风格。最高t-disy +PX；

}；

文件。onmouseup =函数（）{

移动鼠标=空文件；

文件。onmouseup = null；

}；

返回false；

}

核心回溯是移动记录的坐标，然后设置定时器，数组内的数组重排被分配给对象的宽度。

OBtn。onclick =函数（）{

（arrtop。反向）； / /重排

（arrleft。反向）； / /重排

var I＝0；

OBTN。时间= setInterval（）{（）函数（

ODiv。风格。最高arrtop {我} +PX；

ODiv。风格。左= arrleft {我} +PX；

++；

如果（我= = arrtop。长度）{

ClearInterval (oBtn.time);

arrtop = { }；

arrleft = { }；

}

}，20）；

}

}