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 使用 ...
随机推荐
- 开发认为不是bug，你该如何处理？
这是软件测试员面试时经常被问到的问题.看了很多答案,个人觉得作为有工作经验的测试人员回答时不能完全照搬标准答案,技术面试官想听的当然不止如此.毕竟这种情况在实际工作中也常常出现,具体问题要具体分析,你 ...
- 转 git config命令使用
. git config简介 我们知道config是配置的意思,那么git config命令就是对git进行一些配置.而配置一般都是写在配置文件里面,那么git的配置文件在哪里呢?互动一下,先问下大家 ...
- PAT甲题题解-1101. Quick Sort (25)-大水题
快速排序有一个特点,就是在排序过程中,我们会从序列找一个pivot,它前面的都小于它,它后面的都大于它.题目给你n个数的序列,让你找出适合这个序列的pivot有多少个并且输出来. 大水题,正循环和倒着 ...
- PAT甲题题解-1109. Group Photo (25)-（模拟拍照排队）
题意:n个人,要拍成k行排队,每行 n/k人,多余的都在最后一排. 从第一排到最后一排个子是逐渐增高的,即后一排最低的个子要>=前一排的所有人 每排排列规则如下: 1.中间m/2+1为该排最高: ...
- Vim操作指南
vim具有6种基本模式和5种派生模式. 基本模式 普通模式 插入模式 可视模式 选择模式 命令行模式 Ex模式 派生模式 操作符等待模式 插入普通模式 插入可视模式 插入选择模式 替换模式 1.移动光 ...
- 作业 20181204-4 互评Final版本
此作业要求参见:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2478] 组名:可以低头,但没必要 组长:付佳 组员:张俊余 李文涛 孙 ...
- 作业六：小学生四则运算之NABCD模型与产品Backlog。
NABCD模型与产品Backlog NABCD模型 ) N (Need 需求) 方便了老师和学生,使他们可以想要的时候随时可以得到,省时省力,快速出题,马上得到答案. ) A (Approach 做法 ...
- Beta 冲刺 一
团队成员 051601135 岳冠宇 031602629 刘意晗 031602248 郑智文 031602330 苏芳锃 031602234 王淇 照片 项目进展 岳冠宇 昨天的困难 无 今天的进度 ...
- PHP filemtime() 函数
定义和用法 filemtime() 函数返回文件内容上次的修改时间. 若成功,则时间以 Unix 时间戳的方式返回.若失败,则返回 false. 语法 filemtime(filename) 参数 描 ...
- 新版vue-cli如何使用json-server来mork
新版vue-cli如何使用json-server来mork 原创 2018年03月06日 11:28:32 标签: vue / 前端 / webpack / vue-cli 185 新版的vue-cl ...