JS面向对象编程实现的拖拽功能案例详解
本文实例讲述了JS面向对象编程实现的拖拽功能。分享给大家供大家参考，具体如下：
原始的面向过程代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#box {
width: 100px;
height: 100px;
background: blue;
position: absolute;
}
</style>
<title>拖拽</title>
<script>
var oBox=null;
var disX=0;
var disY=0;
window.onload=function(){
oBox=document.getElementById('box');
oBox.onmousedown=fnDown;
};
//鼠标按下事件
function fnDown(ev){
var oEvent = ev||event;
disX = oEvent.clientX - oBox.offsetLeft;
disY = oEvent.clientY - oBox.offsetTop;
document.onmousemove = fnMove;
document.onmouseup = fnUp;
}
//鼠标移动事件
function fnMove(ev){
var oEvent=ev||event;
oBox.style.left = oEvent.clientX - disX + 'px';
oBox.style.top = oEvent.clientY - disY + 'px';
}
//鼠标抬起事件
function fnUp(){
document.onmousemove = null;
document.onmouseup = null;
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
下面是面向对象的代码
drag.js
/**
* 拖拽
* @param {Object} id div的id
*/
function Drag(id){
this.oBox = document.getElementById(id);
this.disX = 0;
this.disY = 0;
var _this = this;
this.oBox.onmousedown = function(){
_this.fnDown();
}
}
//鼠标按下
Drag.prototype.fnDown = function(ev){
var oEvent = ev || event;
this.disX = oEvent.clientX - this.oBox.offsetLeft;
this.disY = oEvent.clientY - this.oBox.offsetTop;
var _this = this;
document.onmousemove = function(){
_this.fnMove();
};
document.onmouseup = function(){
_this.fnUp();
};
}
//鼠标移动
Drag.prototype.fnMove = function(ev){
var oEvent= ev || event;
this.oBox.style.left = oEvent.clientX - this.disX + 'px';
this.oBox.style.top = oEvent.clientY - this.disY + 'px';
}
//鼠标抬起
Drag.prototype.fnUp = function(){
document.onmousemove = null;
document.onmouseup = null;
}
drag.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
position: absolute;
}
</style>
<title>拖拽</title>
<script type="text/javascript" src="../js/drag.js" ></script>
<script>
window.onload = function(){
var drag1 = new Drag("box1");
var drag1 = new Drag("box2");
};
</script>
</head>
<body>
<div id="box1" style="background: red;width: 200px;height: 200px;"></div>
<div id="box2" style="background: blue;width: 100px;height: 100px;"></div>
</body>
</html>
此拖拽有一个问题，就是没有控制拖拽出边界的问题。但我们又不想去修改代码，那我们怎么做？学过java的应该都知道可以写一个子类来做一些更加具体的操作，又保留了父类的功能，就是继承。
html
<script type="text/javascript" src="../js/drag.js" ></script>
<script type="text/javascript" src="../js/dragLimit.js" ></script>
<script>
window.onload = function(){
var drag1 = new Drag("box1");
var drag1 = new DragLimit("box2");//蓝色是不会超出边界的
};
</script>
<body>
<div id="box1" style="background: red;width: 200px;height: 200px;"></div>
<div id="box2" style="background: blue;width: 100px;height: 300px;"></div>
</body>
DragLimit.js：DragLimit继承自Drag，控制了不能出边界
/**
* 限制边界的拖拽，继承自Drag
* @param {Object} id
*/
function DragLimit(id){
Drag.call(this, id);
}
//继承方法
for(var p in Drag.prototype){
DragLimit.prototype[p] = Drag.prototype[p];
}
/**
* 覆写父类的鼠标移动方法，控制不能移出边界
*/
DragLimit.prototype.fnMove = function(ev){
var oEvent= ev || event;
var left = oEvent.clientX - this.disX;
var top = oEvent.clientY - this.disY;
//控制边界
if(left < 0){
left = 0;
} else if(left > document.documentElement.clientWidth-this.oBox.offsetWidth){
left = document.documentElement.clientWidth-this.oBox.offsetWidth;
}
if(top <= 0){
top = 0;
} else if(top > document.documentElement.clientHeight-this.oBox.offsetHeight){
top = document.documentElement.clientHeight-this.oBox.offsetHeight;
}
this.oBox.style.left = left + 'px';
this.oBox.style.top = top + 'px';
}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JS基于面向对象实现的拖拽功能示例
本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit
-
js实现拖拽效果
首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20
-
Sortable.js拖拽排序使用方法解析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上 ondragover 事件:拖拽元素在目
-
JS基于面向对象实现的拖拽库实例
本文实例讲述了JS基于面向对象实现的拖拽库.分享给大家供大家参考.具体如下: 这是一个面向对象的JS拖拽库,可设置水平锁定.垂直锁定.锁定位置.锁定范围等,设定这些范围后,只能在设定的模式下拖动,我觉得这是个挺不错的拖拽实例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-draw-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi
-
jquery方法+js一般方法+js面向对象方法实现拖拽效果
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
javascript支持firefox,ie7页面布局拖拽效果代码
javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是
-
js完美的div拖拽实例代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
javascript实现移动端上的触屏拖拽功能
本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi
-
使用js实现的简单拖拽效果
前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti
-
JavaScript使用面向对象实现的拖拽功能详解
本文实例讲述了JavaScript使用面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: 面向对象有个前提: 前提:所有东西都必须包含在onload里 改写:不能有函数嵌套,可以有全局变量 过程,如下 onload改成构造函数, 全局变量改成属性(通过this) 函数改写成方法 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/