使用jQuery怎么实现一个对话框拖动功能

tangjin

作者

这期内容当中小编将会给大家带来有关使用jQuery怎么实现一个对话框拖动功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

具体如下：

使用jQuery怎么实现一个对话框拖动功能

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>www.jb51.netjquery拖动</title>
<metaname="description"content="">
<metaname="keywords"content="">
<linkhref=""rel="rel="externalnofollow"stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;-moz-user-select:none;}
body{font:12px/16pxbold'microsoftyahei,微软雅黑';}
.dragContainer{
width:382px;
height:395px;
position:absolute;
top:50%;
left:50%;
border:1pxsolidred;
margin-left:-191px;
margin-top:-197.5px;
}
.dragContainer.dragtitle{
width:100%;
height:35px;
border-bottom:1pxsolidred;
text-align:center;
line-height:35px;
}
.dragContainer.dragtitle:hover{
cursor:move;
}
.dragContainer.content{
width:100%;
height:360px;
}
p.buttonGroup{
width:100%;
text-align:center;
position:absolute;
bottom:0;
left:0;
right:0;
padding:5px;
border-top:1pxsolidred;
}
p.buttonGroupinput{
padding:5px10px;
color:white;
}
p.buttonGroupinput:hover{
cursor:pointer;
cursor:hand;
}
p.buttonGroupinput:first-child{
margin-left:25px;
background:blue;
}
p.buttonGroupinput.btn2{
margin-left:15px;
background:red;
}
</style>
</head>
<body>
<divclass="dragContainer"id="drag">
<pclass="dragtitle">标题栏</p>
<divclass="content"></div>
<pclass="buttonGroup"><inputtype="button"value="确定"><inputtype="button"value="取消"class="btn2"></p>
</div>
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<scripttype="text/javascript">
varmydrag={
mousePoint:{x:0,y:0},//初始化坐标
drag:function(){
varthat=this;//保存当前对象即(mydrag)，如果不保存，在mousedown()里访问不了mydrag这个对象
vartargetid=$(".dragtitle");
targetid.mousedown(function(event){
vare=event;
varoffsetLeft=targetid.offset().left;//当前div的左偏移距离
varoffsetTop=targetid.offset().top;//当前div的顶部偏移距离
that.mousePoint.x=e.clientX-offsetLeft;//计算鼠标点击时离它自己div的横向距离
that.mousePoint.y=e.clientY-offsetTop;//计算鼠标点击时离它自己div的纵向距离
$(document).bind('mousemove',move);
e.stopPropagation();
});
functionmove(event){
vare=event;
varLeft=e.clientX-that.mousePoint.x;//移动后，重新计算左偏移和顶部偏移距离
varTop=e.clientY-that.mousePoint.y;
$("#drag").css({'top':Top,'left':Left,'margin':0});
$(document).bind('mouseup',end);
e.stopPropagation();
};
functionend(event){
vare=event;
$(document).unbind('mousemove',move);
$(document).unbind('mouseup',end);
e.stopPropagation();
};
}
}
mydrag.drag();
</script>
</body>
</html>

上述就是小编为大家分享的使用jQuery怎么实现一个对话框拖动功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-04-08 13:38:04

jquery