[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 ...
随机推荐
- ASP.NET JQuery Ajax 详解
在.NET中使用Ajax请求,我们可以使用一般处理程序,或者Web服务,还有一种是使用后台的Web方法(注意:当我们使用后台的Web方法是,后台方法必须加可访问性必须为: public,且为stati ...
- APUE学习之------------信号
在学习一个东西的时候我总是喜欢去问这样做的理由是什么?也喜欢去究竟他的历史.从中你可以发现所有的设计都在不断改进出来的,从来就没有一个设计是一开始就是完美的.好比是人,之初,性也许是善的,如果我们不通 ...
- C功底挑战Java菜鸟入门概念干货（二）
(接上篇博文:C功底挑战Java菜鸟入门概念干货(一)) 一.Java面向对象程序设计-类的基本形式 1.“类”是把事物的数据与相关的功能封装在一起,形成的一种特殊结构,用以表达对真实世界的一种抽象概 ...
- QLinkedList和std::forward_list
forward_list forward_list是C++11版本才有的.forward_list被实现为单链表,而list是一个双向链表,所以forward_list要比list高效一些.forwa ...
- CF 192 Div2
A.Cakeminator 暴搞之,从没有草莓覆盖的行.列遍历 char map[30][30]; int vis[30][30]; int hang[30],lie[30]; int main() ...
- Windows 无法启动xx服务 错误1053：服务没有及时响应启动或控制请求
症状:win7系统的很多系统关键服务,启动不了,双击该服务也弹不了操作框,系统服务是设置为自动 的,但是就是启动不了,在本地服务窗口中只能启动该服务,但是双击会弹不了窗口,你点启动后会出现错误提示10 ...
- ADO.NET基础笔记
ADO.NET 程序要和数据库交互要通过ADO.NET进行,通过ADO.Net就能在程序中执行SQL了. ADO.Net中提供了对各种不同的数据库的统一操作接口. 连接字符串: 程序通过连接字符串指定 ...
- IOS 指纹识别的简单使用
首先导入LocalAuthentication框架 然后导入头文件 #import <LocalAuthentication/LAPublicDefines.h> - (void)begi ...
- Error D8016 '/ZI' and '/Gy-' command-line options are incompatible
使用vs运行工程时出现错误: Severity Code Description Project File Line Suppression StateError D8016 '/ZI' and '/ ...
- JavaSE学习总结第19天_IO流1
19.01 集合的特点和数据结构总结 HashSet.HashMap.Hashtable判断元素唯一性的方式: 通过对象的hashCode和equals方法来完成元素唯一性 如果对象的hashC ...