鼠标拖拽效果

最新推荐文章于 2024-02-17 09:28:20 发布

CrazyHorse02

最新推荐文章于 2024-02-17 09:28:20 发布

阅读量563

点赞数

分类专栏：前端攻城狮之路文章标签： position属性 offsetWid

本文链接：https://blog.csdn.net/u014209090/article/details/44020513

版权

前端攻城狮之路专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这次要做的是鼠标拖动效果，说白了就是鼠标可以拖动网页上的一些组件（div），最普遍的就是在网页进行登录验证的时候，当点击登陆的时候会弹出一个登陆框，这个登陆框是出于屏幕中间的，浮于网页所有元素之上，可以进行随意拖动。

具体实现也是非常简单的，下面就简单记录一下吧

需要用到的知识有：position属性，offsetWidth，offsetHeighrt ，z-index，PageX,PageY，

原生js 注册鼠标监听事件，鼠标按下拖动放松事件，Math.Max(),Math.Min()等。。。

好伐，开始吧，上图所实现的原理其实很简单，点击右上角的登陆按钮，首先要有一个遮罩层，宽高为100%；然后写一个居中显示的登陆框，为登陆框添加BLABLABLA事件，完成。。。O(∩_∩)O~。

①

登陆框内部：

Css部分：

<span style="font-family:Microsoft YaHei;font-size:14px;">/*输入框公用的样式*/
    .ui-dialog-input{
        width: 100%;height: 40px;
        margin: 0px;padding:0px;
        border: 1px solid #d5d5d5;
        font-size: 16px;color: #c1c1c1;
        text-indent: 25px;
        outline: none;
    }

    /*两个输入框的icon设置*/
    .ui-dialog-input-username{
        background: url(images/input_username.png) no-repeat 2px ;
    }
    .ui-dialog-input-password{
        background: url(images/input_password.png) no-repeat 2px ;
    }</span>

HTML：

<span style="font-family:Microsoft YaHei;font-size:14px;"><div class="ui-dialog" id="dialog">
	<!-- 标题栏区域 -->
	<div class="ui-dialog-title" id="dialog-title"> 登录通行证 <a class="ui-dialog-closebutton" href="javascript:hidedialog();"></a> </div>
	<!-- 主要内容区域 -->
	<div class="ui-dialog-content">
		<!-- 两个输入框 -->
		<div class="ui-dialog-l40 ui-dialog-pt15">
			<input class="ui-dialog-input ui-dialog-input-username" type="input" placeholder="手机/邮箱/用户名" />
		</div>
		<div class="ui-dialog-l40 ui-dialog-pt15">
			<input class="ui-dialog-input ui-dialog-input-password" type="input" placeholder="密码" />
		</div>
		<div class="ui-dialog-l40"> <a href="#">忘记密码</a> </div>
		<!-- 登录按钮 -->
		<div> <a class="ui-dialog-submit" href="#">登录</a> </div>
		<div class="ui-dialog-l40"> <a href="#">立即注册</a> </div>
	</div>
</div></span>

②遮罩层的实现：

所谓遮罩层，其实就是一个覆盖范围为100%的一个大的灰色div，平时都是display：none的，如何让他在其他元素的上层呢？这里要用到z-index属性，网页在z轴上就像封面朝桌子的一本书一样，数值越大，就相当于页码越大，自然就越靠上方。值得注意的是：设置z-index属性一定要设置position属性，不然会导致失效或者层级错误

具体课程参考这个http://www.neoease.com/tutorials/z-index/。再设置透明度，

用到opacity属性，范围0-1，值越大透明度越低，这个属性在ie下用的是滤镜：filter:Alpha(opacity=40) ie为0-100;

还要图片选中状态给取消了，如果不取消，当你拖动时会出现图片选中（变蓝），只需要在div中写onselectstart='return false'就可以了。

代码：css：

<span style="font-family:Microsoft YaHei;font-size:14px;">.ul-mask{
width:100%;
height:100%;
background:#000;
opacity:0.4;
filter:Alpha(opacity=40);
position:absolute;
top:0;
left:0;
z-index:8000;
display:none;}</span>

HTML：

<span style="font-family:Microsoft YaHei;font-size:14px;"><div class="ul-mask" id='mask' onselectstart='return false'></div></span>

③

鼠标按下事件处理：e是鼠标拖动对象，他提供了我们需要的属性，e.pageX是鼠标对于屏幕左上角的x距离，pagtY为Y轴，offset是该对象对于父级元素的距离。具体可参照：

http://blog.csdn.net/u014209090/article/details/44015591

<span style="font-family:Microsoft YaHei;font-size:14px;">g('dialog').addEventListener('mousedown',function(e){
	var e=e||window.event;
	mouseOffsetX=e.pageX-g('dialog').offsetLeft;
	mouseOffsetY=e.pageY-g('dialog').offsetTop;
	isdragging=true;

});</span>

④鼠标拖动事件：这里我们要对登陆框的位置进行限制，不能让他的位置在屏幕之外。

具体看代码吧。

<span style="font-family:Microsoft YaHei;font-size:14px;">document.οnmοusemοve=function(e){
			var e=e||window.event;
			var mouseX=e.pageX;
			var mouseY=e.pageY;
			var moveX=0;
			var moveY=0;
			
			if(isdragging===true){
			moveX=mouseX-mouseOffsetX;
			moveY=mouseY-mouseOffsetY;
			//设置范围
			var pageWidth=document.documentElement.clientWidth;
			var pageHeight=document.documentElement.clientHeight;
			
			var dialogWidth=g('dialog').offsetWidth;
			var dialogHeight=g('dialog').offsetHeight;
			var maxX=pageWidth-dialogWidth;
			var maxY=pageHeight-dialogHeight;
			moveX=Math.min(maxX,Math.max(0,moveX));
			moveY=Math.min(maxY,Math.max(0,moveY));
			
			g('dialog').style.left=moveX+'px';
			g('dialog').style.top=moveY+'px';
			
			
			
	}
}</span>

放松鼠标的代码就只是设置isdraging=false；

<span style="font-family:Microsoft YaHei;font-size:14px;">document.οnmοuseup=function(){
isdragging=false;

}</span>

⑤这里我还想当屏幕变化大小的时候，仍然是居中的，那么就要用到onresize了；

<span style="font-family:Microsoft YaHei;font-size:14px;">//窗口改变
window.οnresize=function(){
		autoCenter(g('dialog'));
		FillToBody(g('dialog'));
		}
//自动居中
function autoCenter(el){
var bodyW=document.documentElement.clientWidth;
var bodyH=document.documentElement.clientHeight;
var elW=el.offsetWidth;
var elH=el.offsetHeight;
 el.style.left=(bodyW-elW)/2+"px";
 el.style.top=(bodyH-elH)/2+"px";
}
//自动全屏
function FillToBody(el){
el.style.width=document.documentElement.clientWidth;
el.style.height=document.documentElement.clientHeight;


}
</span>