Javascript达到完美的拖拽效果
1。得到的距离(鼠标位置的外面,距离odiv)
2。了解何时使用移动鼠标事件
三.判断边界是否已过
HTML代码:
CSS代码:
# DIV1 {宽度:100px;身高:100px;背景:红色;位置:绝对}
Javascript代码:
窗口。指针函数(){
无功odiv = document.getelementbyid(联赛);
变量x=0;
var=0;
ODiv。onmousedown =功能(EV){
无功oevent = EV | |事件;
横坐标 / /减div鼠标offsetleft
x = oevent.clientx-odiv.offsetleft;
纵坐标 / /减div鼠标offsettop
Y = oevent.clienty-odiv.offsettop;
文件。移动鼠标=功能(EV){
无功oevent = EV | |事件;
左= oevent.clientx-x VaR;
右oevent.clienty-y VaR;
判断左/圆是否正确
如果(左< 0){
左= 0;
}
是否正确的判断/循环
如果(左>文档。文档元素}。clientwidth odiv。offsetwidth){
左= document.documentelement.clientwidth-odiv.offsetwidth;
}
一定要判断。
如果(右< 0){
右= 0;
}
判断是否世界上/下面
如果(右>文档。documentelenment。自己){
右= document.documentelenment.clientheight-odiv.offsetheight;
}
ODiv。风格。左=左+PX;
ODiv。风格。=权+PX;
}
文件。onmouseup =函数(){
清除文档事件
移动鼠标=空文件;
文件。onmouseup = null;
}
解决Firefox版本的低版本,去掉系统默认值
返回false;
}
}
以上是本文的全部内容,希望大家能喜欢。