[javascript]一种兼容性比较好的简单拖拽
作为一个马上要找工作、非计算机专业、热爱前端的大四狗，最近开始疯狂写demo、看书，准备九、十月份的校招。
晚上用js实现了一个比较简单（low）的拖拽效果，初步测试兼容性还是不错的，于是写一段小博文记录下~大神求轻喷
面向过程的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
window.onload = function (){
var disX = 0;
var disY = 0;
var oBox = document.getElementById("box");
oBox.onmousedown = function (ev){
var oEvent = ev || event; oBox.style.cursor = "move";
disX = oEvent.clientX - oBox.offsetLeft;
disY = oEvent.clientY - oBox.offsetTop; document.onmousemove = function (ev){
var oEvent = ev || event;
var theLeft = oEvent.clientX - disX;
var theTop = oEvent.clientY - disY; // 禁止用户从浏览器左框拖出
if (theLeft < 0) {
theLeft = 0;
} else if (theLeft > document.documentElement.clientWidth-
oBox.offsetWidth) {
theLeft = document.documentElement.clientWidth-
oBox.offsetWidth;
} else if (theTop < 0) {
theTop = 0;
} else if (theTop > document.documentElement.clientHeight-
oBox.offsetHeight) {
theTop = document.documentElement.clientHeight-
oBox.offsetHeight;
}
oBox.style.left = theLeft + 'px';
oBox.style.top = theTop + 'px';
} } document.onmouseup = function (){
document.onmousemove =null;
}
// 窗口重设大小时的处理方法
window.onresize = function (){
oBox.style.left = document.documentElement.clientWidth/2-oBox.offsetWidth/2 + 'px';
oBox.style.top = document.documentElement.clientHeight/2-oBox.offsetHeight/2 + 'px';
}
// 兼容firefox 3.6.19
return false;
}
</script>
</body>
</html>
创建一个拖拽对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box,#box2 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<script>
window.onload = function (){
new Drag("box");
new Drag("box2");
} function Drag(id){
var _this = this; this.disX = 0;
this.disY = 0;
this.oBox = document.getElementById(id); this.oBox.onmousedown = function (ev){
_this.fnDown(ev); // 兼容firefox 3.6.19
return false;
}; document.onmouseup = function (){
_this.fnUp();
}
window.onresize = function (){
_this.fnResize();
};
// 兼容firefox 3.6.19
return false;
} Drag.prototype.fnDown = function(ev){ var oEvent = ev || event;
var _this = this;
this.oBox.style.cursor = "move";
this.disX = oEvent.clientX - this.oBox.offsetLeft;
this.disY = oEvent.clientY - this.oBox.offsetTop; document.onmousemove = function (ev){
_this.fnMove(ev);
}; } Drag.prototype.fnMove = function(ev){
var oEvent = ev || event;
var theLeft = oEvent.clientX - this.disX;
var theTop = oEvent.clientY - this.disY;
// 禁止用户从浏览器左框拖出
if (theLeft < 0) {
theLeft = 0;
} else if (theLeft > document.documentElement.clientWidth-
this.oBox.offsetWidth) {
theLeft = document.documentElement.clientWidth-
this.oBox.offsetWidth;
}
if (theTop < 0) {
theTop = 0;
} else if (theTop > document.documentElement.clientHeight-
this.oBox.offsetHeight) {
theTop = document.documentElement.clientHeight-
this.oBox.offsetHeight;
}
this.oBox.style.left = theLeft + 'px';
this.oBox.style.top = theTop + 'px';
} Drag.prototype.fnUp = function (){
document.onmousemove =null;
} Drag.prototype.fnResize = function(){
this.oBox.style.left = document.documentElement.clientWidth/2-this.oBox.offsetWidth/2 + 'px';
this.oBox.style.top = document.documentElement.clientHeight/2-this.oBox.offsetHeight/2 + 'px';
}
</script>
</body>
</html>
[javascript]一种兼容性比较好的简单拖拽的更多相关文章
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- 练习：javascript弹出框及地址选择功能,可拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- javascript小实例，PC网页里的拖拽
几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...
- javascript小实例，PC网页里的拖拽（转）
这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...
- Unity UGUI 实现简单拖拽功能
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...
- javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- Javascript:简单拖拽效果的实现
核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function dra ...
- 原生js通过prottype写的一个简单拖拽
<!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title&g ...
随机推荐
- Servlet运行过程详解
比如,在浏览器地址栏输入http://ip:port/web01/hello step1,浏览器依据ip,port建立与servlet容器(容器同时也是一个简单的web服务器)之间的连接. step2 ...
- crt连接vitualbox中centos虚拟机
在virtalbox中安装了centos虚拟机后,在虚拟机中直接操作很是不方便,所以想用crt连接虚拟机, 1.打开virtualbox,设置-网络,网络连接2设置连接方式为“Bridged Adap ...
- psycopg2接口的基本用法
转载自:http://zhiwei.li/text/2012/02/05/psycopg2接口的基本用法/ 与其他实现了DB API 2.0协议的其他数据库用户基本一致. import psycopg ...
- libcprops
Install Howto Download the latest epel-release rpm from http://dl.fedoraproject.org/pub/epel/6/x86_6 ...
- 驯服你的Windows Server 2003
虽然通过一些技巧可以让Windows Server 2003更符合我们的使用习惯,但对我等菜鸟来说,操作还是有相当的难度,有没有更简单.更省事的驯服它的办法呢?有,那就是使用Windows Serve ...
- rsync、ssh备份
Linux系统需求 为了实现这个备份程序,需要准备一个外部驱动器.您可以将备份写到一个外部USB磁盘,但这样做效率不高.因此,我假设您将备份写到位于网络某处的服务器中.这台服务器要为带有SSH和rsy ...
- 算法导论 6.5.9 堆实现K路归并问题
问题: 设计一个时间复杂度为O(NlogK)的算法,它能够将K个有序链表合并为一个有序链表,这里的N为所有输入链表包含的总的元素个数 分析: 该问题为经典的利用堆完成K路归并的问题: 当K个序列满足一 ...
- python利用utf-8编码判断中文英文字符(转)
下面这个小工具包含了判断unicode是否是汉字.数字.英文或者其他字符,全角符号转半角符号,unicode字符串归一化等工作. #!/usr/bin/env python # -*- coding: ...
- Eclipse 代码提示不显示的问题
在备份Android SDK和Eclipse的时候出了问题,然后只能重新下载,SDK下得我都要吐血了,超慢.然后,我发现Eclipse有了新版本的,于是就下载了个新版的,结果出了问题了.所有的Andr ...
- 飘逸的python - 一个最简单的服务器
python拥有这种单独起一个服务器监听端口的能力,用标准库的wsgiref就行. from wsgiref.simple_server import make_server def simple_a ...