[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 ...
随机推荐
- wireshark 包分析命令
1.查看原地址过滤包命令: ip.src ==192.168.1.1 2.查看目的地址过滤包:ip.dst == 192.168.1.1 3.关键字 eq 等于 "==" ,and ...
- 字符串匹配算法1-KMP
前面介绍过,字符串搜索一般来说有三种方式,前缀搜索,后缀搜索,子串搜索.KMP使用的是前缀搜索. 假设p的偏移是i,也就是窗口的位置是i,匹配到位置j+1时发现了不匹配.现在的问题是向前移动窗口到什么 ...
- Firefox 备份
参考http://mozilla.com.cn/post/32327/ 火狐的地址栏中输入about:support点击“打开所在文件夹”按钮,会弹出一个资源管理器,并且定位到你当前的Profile文 ...
- 转: Transact-sql游标使用详解~~很详细
/*原理:游标就是把数据按照指定要求提取出相应的数据集,然后逐条进行数据处理.1.1游标的概念 游标(Cursor)它使用户可逐行访问由SQL Server返回的结果集. 使用游标(cursor)的一 ...
- Delphi函数指针的两种定义（对象方法存在一个隐藏参数self，所以不能相互赋值）
delphi中经常见到以下两种定义 Type TMouseProc = procedure (X,Y:integer); TMouseEvent = procedure (X,Y:integer) o ...
- cocos2dx中的其他层
在cocos2dx中,CCLayer默认是黑色的,但是有时候需要有其他颜色北京的图层,那么就需要用到CCLayerColor 如下代码: ccColor4B color ＝ccc4(255, 0, 0 ...
- cocos2dx中的精灵CCSprite
什么是精灵(CCSprite),在官网文档中是这么定义的 Sprites A cocos2d CCSprite is similar to sprites you find in other game ...
- FIB数列
斐波那契级数除以N会出现循环,此周期称为皮萨诺周期. 下面给出证明 必然会出现循环 这是基于下面事实: 1． R(n+2)=F(n+2) mod P=(F(n+1)+F(n)) mod P=(F(n+ ...
- STM32菜鸟成长记录---RS485通讯协议的应用
写作原因:近来蛋闲?非也 ! 昨天一同事合作的项目代码出现的bug-----他的上位机每200ms给我发送命令向我这边下位机读取一些数据,在此过程会按下按键做一些另外操作并给他返回数据:(通信是通 ...
- HDU 4716 A Computer Graphics Problem
A Computer Graphics Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...