js拖放效果的简单实现

这个例子为大家分享js的拖放效果的具体代码，供大家参考，具体内容如下

文件

* {
保证金：0；
填充：0；
}
HTML，体{
宽度：100%；
身高：100%；
}
#箱{
位置：绝对；
顶部：50%；
左：50%；
宽度：200px；
身高：200px；
背景：# ff6600；
保证金：- 00 - 100px 100px；
光标移动；
*
不知道中间的高。
位置：绝对；
顶部：0；
左：0；
权利：0；
底部：0；
保证金：汽车；
* /
}

js实现允许当前元素位于屏幕的中心位置。
VaR箱= document.getelementbyid（'box）；
/ / box.style.top =（（document.documentelement.clientheight | |文件。身体。自己）盒。offsetheight）/ 2 + PX；

/ / box.style.left =（（document.documentelement.clientwidth | |文件。身体。clientwidth）盒。offsetwidth）/ 2 + PX；
拖动原理
*
当鼠标按下盒子上，我们开始拖动（绑定框onmousemove和onmouseup）。当鼠标移动时，我们将计算盒子的最新位置。
当鼠标被举起，拖放完成，我们的移动和上升是无用的，我们删除这两种方法。
* /
box.onmousedown =下来；
函数向下（e）{
E = e window.event | |；
记录起始位置信息
这{瑞克斯= e.clientx；
这{服务= e.clienty；
这{直线} = parseFloat（这个风格。左）；
这开始{ } = parseFloat（这个风格。顶部）；
移动和解除绑定元素事件
如果（这个设置鼠标捕获是是是）{
（这个设置鼠标捕获是是是） / /把当前鼠标和这个联系在一起
this.onmousemove =移动；
本。onmouseup =了；
其他{ }
无功_this =这；
document.onmousemove =功能（e）{
在这个窗口的内部移动（e）
move.call（_this，E）；
}
；
Document.onmouseup= function (E) {
up.call（_this，E）；
}；
}

}
函数移动（e）{
E = e window.event | |；
VaR卷曲=（e.clientx-this {瑞克斯}）+本{直线}；
VaR Curt =（e.clienty-this { 中的}）+本{ 开始}；
边界判断
VaR最小值= 0，薄荷= 0，最大值=（document.documentelement.clientwidth | |文件。身体。clientwidth）- this.offsetwidth（document.documentelement.clientheight = MaxT，document.body.clientheight | |）- this.offsetheight；
卷曲卷曲卷曲）最大值：最大值=；
Curt = Curt MaxT MaxT：Curt）
this.style.left =卷发+PX；
this.style.top =简单+PX；
}
函数向上（e）{
如果（这。捕获释放）{
（这。捕获释放）； / /把鼠标和松散的盒子
this.onmousemove = null；
本。onmouseup = null；
其他{ }
document.onmousemove = null；
文件。onmouseup = null；
绑定，移动，向上绑定，这是文档
}

}
当鼠标移动太快，我们会把盒子的老鼠，MouseMove和mouseup事件被->老鼠失去焦点
IE和Firefox，我们把盒子和鼠标可以用一个方法绑定在一起。
/ /鼠标然后迅速跑出来的文件：我们把MouseMove和mouseup绑定到文件

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。