javascript实现完美拖拽效果

前端之家收集整理的这篇文章主要介绍了javascript实现完美拖拽效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_5020@拖拽的原理


@H
502_0@1.获取距离(鼠标的位置-odiv的外边距)


@H_5020@2.理解什么时候用onmousemove事件


@H
5020@3.判断是否过界


@H
502_0@HTML代码


<div class="jb51code">
<pre class="brush:xhtml;">
<div id="div1">

@H_502_0@css代码

@H_502_0@javascript代码

document.onmousemove=function(ev){ var oEvent=ev||event; var left=oEvent.clientX-x; var right=oEvent.clientY-y; //判断左边是否过界 if(left<0){ left=0; } //判断右边是否过界 else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){ left=document.documentElement.clientWidth-oDiv.offsetWidth; } //判断上边是否过界 if(right<0){ right=0; } //判断下边是否过界 else if(right>document.documentElenment.clientHeight){ right=document.documentElenment.clientHeight-oDiv.offsetHeight; } oDiv.style.left=left+"px"; oDiv.style.top=right+"px"; } document.onmouseup=function(){ //清空document的事件 document.onmousemove=null; document.onmouseup=null; } //<a href="/tag/jiejue/" target="_blank" class="keywords">解决</a>低版本火狐bug,干掉系统默认 return false;

}
}

@H_502_0@以上所述就是本文的全部内容了,希望大家能够喜欢。

猜你在找的JavaScript相关文章