[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 ...
随机推荐
- 解决python2.7.9以下版本requests访问https的问题
在python2.7.9以下版本requests访问https连接后,总会报一些关于SSL warning. 解决法子可以参考:https://urllib3.readthedocs.io/en/la ...
- 读书笔记:js设计模式
面向过程编程,面向对象编程和函数式编程> 定义一个类方法1:function Anim(){ } Anim.prototype.start = function(){ .. };Anim.pro ...
- 射频识别技术漫谈(27)——CPU卡概述
智能卡按安全级别可以分为三类:存储器卡.逻辑加密卡和CPU卡,其中CPU卡是安全级别最高的.从“CPU”这个名字可以看出,CPU卡最大的特点就是卡片里面有一个"CPU",有了CPU ...
- A/B（扩展欧几里德）
A/B Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- C++的一些编程规范(基于google)
1.所有头文件都应该使用#define 防止头文件被多重包含,命名格式可以参考<PROJECT>_<PATH>_<FILE>_H 2.使用前置声明尽量减少.h文件中 ...
- Ext JS学习第二天 我们所熟悉的javascript（一）
此文用来记录学习笔记: •ExtJS是一个强大的javascript框架,如果想真正的掌握ExtJS,那么我们必须要对javascript有一定的认识,所以很有必要静下心来,抱着一本javascrip ...
- Difference between LINQ to SQL and LINQ to Entity（DataContext and DbContext）
http://msdn.microsoft.com/en-us/library/cc161164.aspx http://stackoverflow.com/questions/2443836/wha ...
- Axure使用
(一) Axure rp的界面 1-主菜单工具栏 大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示. 2-主操作界面 绘制产品原型的操作区域,所有的用到的元件都拖到该区域. 3 ...
- Arduino101 中使用 Mirf 库的问题(2016-04-04)
Mirf 库在使用 NRF24L01 的时候接触到,感觉很好用.但在用 Arduino101 的时候遇到一些问题,记录一下,对于底层不了解,希望有熟悉的同学能给点指点: 编译会提示 MirfHardw ...
- Cannot mix incompatible Qt library (version 0x40801) with this library (version 0x40804)
安装EMAN2(单颗粒重构的软件)之后,运行e2projectmanager.py来启动程序出现了这个错误. 去网上找了一下,发现一个靠谱的方案,这个问题出现是由于EMAN2这个程序自带了Qt的库,而 ...