正文 

当前位置： 首页 > java > java语法

js实现登陆页面的拖拽功能

不再犯错      2022-02-08     112

关键词：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆页面的拖拽功能实现</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.dialog{
width: 380px;
height: auto;
position:fixed;
z-index: 1000;
border: 1px solid #d5d5d5;
background-color:#fff;
display: none;
}
.diatitle{
height: 48px;
line-height: 40px;
text-align: center;
color:#535353;
background-color: #f5f5f5;
}
.diacontent{
padding: 15px 20px;
}
.close{
font-size: 20px;
float: right;
margin-right: 20px;
}
#txt{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#pwd{
width: 100%;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#btn{
display: block;
width:80px;
height: 40px;
margin:0 auto;
background-color: #CCCCCC;
border:none;
outline-style: none;
}
.mask{
background-color:#000000;
opacity: 0.4;
filter:Alpha(opacity=40);
z-index: 900;
position: fixed;
top: 0px;
left: 0px;
display: none;
}
</style>
<body style="height:1500px">
<div class="dialog" id="dialog">
<div class="diatitle" id="diatitle">
登陆页
<a href="#" class="close">&times;</a>
</div>
<div class="diacontent" id="diacontent">
<form action="fsaf" method="post">
<input type="text" name="" id="txt" placeholder="请输入账号" />
<input type="password" name="" id="pwd" placeholder="请输入密码" />
<div id="" style="text-align:right;font-size: 12px;">
<a href="#">忘记密码</a>
</div>
<input type="button" name="" id="btn" value="登陆" />
<div id="" style="text-align:right;font-size: 12px;">
<a href="#">立即注册</a>
</div>
</form>
</div>
</div>
<div class="mask">

</div>
<div id="login">
点击弹出登陆图层
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var close=document.getElementsByClassName("close")[0];
var dialog=document.getElementById("dialog");
var diatitle=document.getElementById("diatitle");
var diacontent=document.getElementById("diacontent");
var mask=document.getElementsByClassName("mask")[0];
var isDraging=false; //是否可拖拽的标记
diatitle.onmousedown=down;
document.onmousemove=move;
document.onmouseup=up;
var login=document.getElementById("login");
login.onclick=function(){
dialog.style.display="block";
mask.style.display="block";
}
//自动居中-登陆浮层
close.onclick=function(){
dialog.style.display="none";
mask.style.display="none";
}

//登陆层居中
autoCenter();
function autoCenter(){
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
var elW = dialog.offsetWidth;
var elH = dialog.offsetHeight;
dialog.style.left = ((bodyW-elW)/2-190) + 'px';
dialog.style.top = ((bodyH-elH)/2-80) + 'px';
}
//遮罩层
fillToBody();
function fillToBody(){
mask.style.width = document.documentElement.clientWidth +'px';
mask.style.height = document.documentElement.clientHeight + 'px';
}
按下
function down(){
diatitle.style.cursor="move";
isDraging=true;
objleft=dialog.offsetLeft;
objtop=dialog.offsetTop;
posX = parseInt(mousePosition(event).x)
posY = parseInt(mousePosition(event).y);
offsetX=posX-objleft;
offsetY=posY-objtop;
}
//移动
function move(event) {
if (isDraging == true) {
var x=mousePosition(event).x-offsetX;
var y=mousePosition(event).y-offsetY;
var w = document.documentElement.clientWidth - dialog.offsetWidth;
var h = document.documentElement.clientHeight - dialog.offsetHeight;
x=Math.min(w,Math.max(0,x));
y=Math.min(h,Math.max(0,y));
dialog.style.left = x + 'px';
dialog.style.top = y + 'px';
}
}
//松开
function up() {
isDraging= false;
}
function mousePosition(evt){
var xPos, yPos;
evt = evt || window.event;
if (evt.pageX) {
xPos = evt.pageX;
yPos = evt.pageY;
} else {
xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
}
return {
x: xPos,
y: yPos
}
}
}
</script>
</html>

 

通过js实现简单的拖拽功能并且可以在特定元素上禁止拖拽

...处理这些细节，经过翻阅jqueryui的源码才找到答案。拖拽实现关于拖拽功能不再啰嗦，直接贴代码/***[draggable拖拽方法]*@param{[type]}modal[移动元素]*@param 查看详情

js实现鼠标的拖拽效果

拖拽效果在我们上网的过程中是很常见的，大家都应该在电脑上面登陆过qq吧，当这个qq的登陆框弹出来的时候，我们是可以进行拖动的。这就是一个拖拽效果这是我在慕课网上面看到的，我直接拿过来了，地址http://www.imooc.com/le... 查看详情

javascript实现最简单的拖拽效果

一、一些无关痛痒的唠叨拖拽还是挺不错的一个页面效果，我个人认为，其生命力在于可以让用户自己做一些操作，所谓自定义。例如：①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能... 查看详情

qt中如何实现一个treewidget的拖拽功能

QTreeWidget中有一个分级别的树，只允许同级别之间的拖拽功能，那位会做帮帮小弟吧参考技术AsetDragDropMode(QAbstractItemView::InternalMove) 查看详情

three.js如何实现在x,y,z轴上的拖拽

...是如果我用THREE.js创建了一个模型，那该用什么代码才能实现像上述那样可以选取那个模型并且拖拽移动它呢参考技术A在three的源码里面有一个编辑器，里面实现了这个功能，目前没有研究明白，可以去看一下。这是目前我发现... 查看详情

jqgrid最近在用jqgrid,我想要实现列的拖拽功能，请问有人实现过吗

我没说清楚，我要实现jqgrid列的拖拽，不是列宽，是列的顺序拖拽。谢谢参考技术A上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行... 查看详情

原生js实现弹出窗口的拖拽（直接copy可用）

　　上一篇说了一下弹出窗口功能的实现思路，一般情况下紧接着就会需要做到弹窗的移动，当然现在有很插件、库比如hammer可以使用，效率也非常好。但我觉得还是有必要了解一下原生JS的实现思路及方式，如下：　　思路：... 查看详情

jquery实现行列的单向固定和列的拖拽

其实这些功能在PL/SQLDev中都有实现，在页面中还是蛮常见的。我实现列的单向固定的原理：将需要单向固定的列放在一个<table>标签中，而整体的数据放在另一个<table>标签中。列的拖拽：使用onstartdrag、ondragover、drop事件... 查看详情

jquery实现对div的拖拽功能

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情

cookie结合js实现记住的拖拽

哈喽!!!我胡汉三又回来啦!!!有木有记挂挪啊!咱们今天说一个cookie结合JS的小案例哦!话不多说直接上代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <style> #drag{ width:200px; 查看详情

模拟实际项目需求，使用element的日历组件配合h5的拖拽功能实现任务拖拽保存

<!--@Description:简化版的实际项目，模拟在element日历组件上拖拽任务--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1 查看详情

javascript实现网页元素的拖拽效果

以下的页面中放了两个div，能够通过鼠标拖拽这两个元素到任何位置。实现该效果的HTML页面代码例如以下所看到的：<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><styletype="text/css">#xixi{wid 查看详情

element的table使用sortable.js进行拖拽的时候，禁止某些列的拖拽功能

...able不具备拖拽排序的功能，所以有时候会用到Sortable.js去实现拖拽的功能。具体的使用方法可以参考以下https://blog.csdn.net/weixin_34301307/article/details/87527853但是有时候我们只想特定的列能够进行拖拽，特别是在有input输入框的时候... 查看详情

android一步一步带你实现recyclerview的拖拽和侧滑删除功能

...temTouchHelper-Demo 这个项目使用了RecyclerView的ItemTouchHelper类实现了Item的拖动和删除功能，ItemTouchHelper是v7包下的一个类，我们看一下他的介绍Thisisautilityclasstoaddswipetodismissandd 查看详情

three.js如何实现在x,y,z轴上的拖拽

...谢谢就是类似于3Dmax里的那种模型的拖拽参考技术ATHREE.js实现在x,y,z轴上的拖拽需要用户注册拖拽控件。1、注册的js代码如下：varscript=document.createElement('script');    script.type='text/javascript';   &nb... 查看详情

arcgisjs学习笔记2实现仿百度的拖拽画圆

...产品外，其他的真的不敢恭维。在上一篇笔记里，我已经实现了自定义的地图测量模块。在百度地图里面（其他地图）都有一个周边搜索的功能，拖拽画一个圆，然后以圆半径进行搜索（也就是缓冲区╮(╯_╰)╭）。 这次的... 查看详情

selenium怎么实现文件拖拽上传功能

...里面有页面元素的拖拽操作调用第三方的东东，貌似可以实现文件上传，这个我也正在研究中但是直接将文件托在浏览器实现上传，这个selenium好像还真不行……文件本身是属于windows的参考技术A这个不行的 查看详情

wpf中如何实现控件的拖拽

想实现这样一个常用功能：在ListBox的一个Item上点住左键，然后拖拽到另外一个控件（如ListView中），松开左键，数据已经拖拽过来。步骤如下：1.设置ListBox的AllowDrop属性为True2.在ListBoxItem的Style中设置EventSetter<Stylex:Key="MyListBoxI... 查看详情