javascript完美拖拽的实现
直接上代码：
HTML代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="drag.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="login">
<h2>网站登录</h2>
<div class="user">
<span>用户名：</span><input type="text" name="user" class="txt" />
</div>
<div class="pass">
<span>密 码：</span><input type="password" name="pass" class="txt" />
</div>
<div class="submit">
<input type="submit" value="登录" class="button" />
</div>
</div>
</body>
</html>
CSS代码：
body, h2 {
margin:;
padding:;
}
#login {
width:350px;
height:250px;
border:1px solid #ccc;
position:absolute;
left:512px;
top:300px;
}
#login h2 {
font-size:14px;
text-align:center;
height:30px;
line-height:30px;
background:#f60;
color:white;
cursor:move;
margin-bottom:30px;
letter-spacing:1px;
}
#login .user, #login .pass {
text-align:center;
font-size:12px;
height:60px;
line-height:60px;
}
#login .user span, #login .pass span {
*position:relative;
*bottom:8px;
}
#login .txt {
width:184px;
border:1px solid #ccc;
background:#fff;
height:20px;
padding:5px 8px;
line-height:20px;
}
#login .submit {
text-align:right;
}
#login .button {
width:100px;
height:30px;
background:#06f;
border:none;
cursor:pointer;
margin:10px 30px;
color:white;
letter-spacing:1px;
font-weight:bold;
}
拖拽核心代码：
function drag(obj) {
if (typeof obj === 'string') {
var obj = document.getElementById(obj);
} else {
var obj = obj;
}
//去除首尾空格
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/, '');
}
function fixEvent(event) {
event.target = event.srcElement;
event.preventDefault = fixEvent.preventDefault;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
};
obj.onmousedown = mousedown;
function mousedown(e) {
var e = e || fixEvent(window.event);
var disX = e.clientX - obj.offsetLeft;
var disY = e.clientY - obj.offsetTop;
if (trim(obj.innerHTML) === 0) {
e.preventDefault();
}
if (e.target.tagName === 'H2') {
document.onmousemove = move;
document.onmouseup = up;
} else {
document.onmousemove = null;
document.onmouseup = null;
}
function move(e) {
var e = e || fixEvent(window.event);
var left = e.clientX - disX;
var top = e.clientY - disY;
if (obj.setCapture) {
obj.setCapture();
}
if (left < 0) {
left = 0;
} else if (left > document.documentElement.clientWidth - obj.offsetWidth) {
left = document.documentElement.clientWidth - obj.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > document.documentElement.clientHeight - obj.offsetHeight) {
top = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = left + 'px';
obj.style.top = top + 'px';
};
function up() {
if (obj.releaseCapture) {
obj.releaseCapture();
}
document.onmousemove = null;
document.onmouseup = null;
}
};
}
调用代码：
window.onload = function () {
var login = document.getElementById('login');
drag(login);
};
欢迎批评指正！！！
javascript完美拖拽的实现的更多相关文章
- 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- javascript鼠标拖拽的那些事情
<html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- Javascript之拖拽库
在手机上运行触屏拖动时,我发现页面并没有反应,服务器端执行javascript在手机端与电脑端不能“相同式”实现(电脑端运行正常,而手机端不一样),这是为甚么呢? 首先,我们都知道javascript ...
- Javascript自由拖拽类
基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
- JavaScript鼠标拖拽特效及相关问题总结
#div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...
- html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...
随机推荐
- Jupyter Notebook 工作空间 / 默认路径 的设置方式
Jupyter notebook 安装后,启动后,默认的工作空间是当前用户目录.为了方便对文档进行管理,往往需要自行设置工作空间. 下面介绍两种亲试有效的工作空间设置方法. 1.修改快捷方式 对 Ju ...
- Jmeter(四)_16个逻辑控制器详解
循环控制器: 指定其子节点运行的次数,可以使用具体的数值,也可以设置为变量 1:勾选永远:表示一直循环下去 2:如果同时设置了线程组的循环次数和循环控制器的循环次数,那循环控制器的子节点运行的次数为两 ...
- 华为云对Kubernetes在Serverless Container产品落地中的实践经验
华为云容器实例服务,它基于 Kubernetes 打造,对最终用户直接提供 K8S 的 API.正如前面所说,它最大的优点是用户可以围绕 K8S 直接定义运行应用. 这里值得一提是,我们采用了全物理机 ...
- （三）Hyperledger Fabric 1.1安装部署-chaincode测试
环境搭建完毕,需要的工具和镜像安装完毕,就可以进行chaincode测试了,接下来参考官方教程运行first-network. 进入first-netwok: cd first-network fir ...
- Daily Scrum NO.8
工作概况 今天是周六,虽然由于工作紧张要求这一日也定为工作日,但是也许是因为昨日大家工作做得较多或者周末的缘故,今天的进展状况并不理想.线程池和异常清理器的后端已经完成,而清理器的界面和动态爬取仍旧没 ...
- Daily Scrumming* 2015.12.13（Day 5）
一.团队scrum meeting照片 二.今日总结 姓名 WorkItem ID 工作内容 签入链接以及备注说明 江昊 任务1063 查找与学习前端工具库,并写出一篇指导文档 https://gi ...
- 作业六：小学生四则运算之NABCD模型与产品Backlog。
NABCD模型与产品Backlog NABCD模型 ) N (Need 需求) 方便了老师和学生,使他们可以想要的时候随时可以得到,省时省力,快速出题,马上得到答案. ) A (Approach 做法 ...
- CI框架 default_controller 如何设置为：'目录/Controller' 转
闲谈 前几天,我的室友发现了一个问题:CI框架的Router.php文件的default_controller设置为application\controllers文件下的 一级PHP文件名 就可以,设 ...
- CentOS 修改时区的方法
study from https://blog.csdn.net/skh2015java/article/details/85007624 第一种 tzselect 输入命令直接选择即可 第二种,直接 ...
- 【JavaService】使用Java编写部署windows服务
如果你玩windows系统,你对服务这个东西并不会陌生,服务可以帮我们做很多事情,在不影响用户正常工作的情况下,可以完成很多我们需要的需求. 众所周知,微软的visio studio内置的Servic ...