[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 ...
随机推荐
- [LeetCode]题解:005-Longest Palindromic Substring优化
题目来源和题意分析: 详情请看我的博客:http://www.cnblogs.com/chruny/p/4791078.html 题目思路: 我上一篇博客解决这个问题的时间复杂度是最坏情况是(O(n^ ...
- ASP.NET JQuery Ajax 详解
在.NET中使用Ajax请求,我们可以使用一般处理程序,或者Web服务,还有一种是使用后台的Web方法(注意:当我们使用后台的Web方法是,后台方法必须加可访问性必须为: public,且为stati ...
- 帝国cms7.0调用出栏目下的东西
打开帝国后台,新建一个栏目,简历一个封面模板为 abc,套用一个封面栏目. [e:loop={"select * from {$dbtbpre}enewsclass where classi ...
- 转: 深入理解 AngularJS 的 Scope
查看 DEMO.参考 StackOverflow. ng-switch ng-switch 的原型继承和 ng-include 一样.所以如果你需要对基本类型数据进行双向绑定,使用 $parent ...
- Delphi函数指针的两种定义(对象方法存在一个隐藏参数self,所以不能相互赋值)
delphi中经常见到以下两种定义 Type TMouseProc = procedure (X,Y:integer); TMouseEvent = procedure (X,Y:integer) o ...
- Spinner样式大全
Spinner样式大全
- perl5 第二章 简单变量
第二章 简单变量 by flamephoenix 一.整型 二.浮点数 三.字符串 基本上,简单变量就是一个数据单元,这个单元可以是数字或字符串.一.整型 1.整型 PERL最常用的简单变量,由 ...
- Android 中文API (70) —— BluetoothDevice[蓝牙]
前言 本章内容是 android.bluetooth.BluetoothDevice,为Android蓝牙部分的章节翻译.蓝牙设备类,代表了蓝牙通讯国足中的远端设备.版本为 Android 2.3 ...
- python下yield(生成器)
python下的协程: #encoding=utf-8 """ 协程----微小的进程 yield生成器-----生成一个可迭代对象比如list, tuple,dir 1 ...
- PeopleEditor的取值及赋值
/// <summary> /// 从PeopleEditor取值 /// </summary> /// <param name="peopleEditor&q ...