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 使用 ...
随机推荐
- OpenGL：使用顶点数组法绘制正六面体
在今天的opengl的课程以及实验中,我们学习了如何使用顶点数组的方法来绘制图形,但相信还有很多同学对它的实际使用方法不太了解,我们就用我们今天实验课上的实例来简单讲解一下 题目及要求 绘制一个正六面 ...
- POW的重力之美
定律一:每一个UTXO都保持其状不变,直到有外力迫使它改变这种状态为止--艾萨克•牛顿,原理2.0 在过去的几年里,关于比特币的工作量证明(PoW)所造成的"巨大的能源浪费"已经被 ...
- VC++ MFC程序设置以管理员权限运行
1.引入资源文件 (.manifest文件),文件中的 name 值为程序全称.exe:文件内容如下: <?xml version="1.0" encoding=" ...
- 睡眠猴子——Alpha阶段项目总结
设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 针对广大失眠人群,尤其是程序猿用户的失眠问题.定义的清楚.描述过. 2. 是否有充足的时间来做计划 ...
- 【助教】浅析log4j的使用
有不少童鞋私信我一些在写代码时候遇到的问题,但是无法定位问题出在哪里,也没有日志记录,实际上,写日志是开发项目过程中很重要的一个环节,很多问题都可以从日志中找到根源,从而定位到出错位置,为解决问题提供 ...
- Ubuntu安装jdk，正确配置环境变量
作为一个Linux新手,在写这篇博客之前,装了几次jdk,好多次都是环境变量配置错误,导致无法登录系统.经过几天的研究,今天新装系统,从头来完整配置一遍 系统版本:Ubuntu 16.04 JDK版本 ...
- Beta阶段冲刺四
Beta阶段冲刺四 Task1:团队TSP 团队任务 预估时间 实际时间 完成日期 新增其他学院的爬虫 180 130 11.30 新增其他学院的数据库字段修改 180 160 12.1 新增其他学院 ...
- Docker(六)-Dcoker仓库
仓库 一个容易混淆的概念是注册服务器(Registry). 实际上注册服务器是管理仓库的具体服务器,每个服务器上可以有多个仓库,而每个仓库下面有多个镜像.从这方面来说, 仓库可以被认为是一个具体的项目 ...
- CopyOnWriteArrayList、CopyOnWriteArraySet、ConcurrentHashMap的实现原理和适用场景
ConcurrentHashMap代替同步的Map(Collections.synchronized(new HashMap())),众所周知,HashMap是根据散列值分段存储的,同步Map在同步的 ...
- LVS(Linus Virtual Server)：三种负载均衡方式比较+另三种负载均衡方式
还有个姊妹篇也可以参考这个文章:六大Web负载均衡原理与实现 什么是LVS (Linux Virtual Server)? 首先简单介绍一下LVS (Linux Virtual Server)到底 ...