JavaScript使用面向对象实现的拖拽功能详解

更新时间：2019年06月12日 11:55:33 作者：longzhoufeng

这篇文章主要介绍了JavaScript使用面向对象实现的拖拽功能,结合实例形式详细分析了javascript基于面向对象的拖拽功能实现思路、原理与具体操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript使用面向对象实现的拖拽功能。分享给大家供大家参考，具体如下：

面向对象有个前提：

前提：所有东西都必须包含在onload里
改写：不能有函数嵌套，可以有全局变量
过程，如下
- onload改成构造函数，
- 全局变量改成属性（通过this）
- 函数改写成方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>面向对象的继承-1</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script>
window.onload = function() {
  var oDiv = document.getElementById('div1');
  oDiv.onmousedown = function(ev) {
    var ev = ev || event;
    var disX = ev.clientX - this.offsetLeft;
    var disY = ev.clientY - this.offsetTop;
    document.onmousemove = function(ev) {
      var ev = ev || event;
      oDiv.style.left = ev.clientX - disX + 'px';
      oDiv.style.top = ev.clientY - disY + 'px';
    }
    document.onmouseup = function() {
      document.onmousemove = document.onmouseup = null;
    }
  }
}
</script>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

把局部变量改成全局变量

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>面向对象的继承-2</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script>
var oDiv=null;
var disX=0;
var disY=0;
window.onload = function() {
  oDiv = document.getElementById('div1');
  oDiv.onmousedown = fnDown;
}
function fnMove(ev) {
  var ev = ev || event;
  oDiv.style.left = ev.clientX - disX + 'px';
  oDiv.style.top = ev.clientY - disY + 'px';
}
function fnUp() {
  document.onmousemove = document.onmouseup = null;
}
function fnDown(ev) {
  var ev = ev || event;
  disX = ev.clientX - this.offsetLeft;
  disY = ev.clientY - this.offsetTop;
  document.onmousemove = fnMove;
  document.onmouseup =fnUp;
}
</script>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

引用块内容

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>面向对象的继承-2</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#div2 {width: 100px; height: 100px; background: red; position: absolute;top:120px;}
</style>
<script>
window.onload=function(){
  new Drag('div1');
  new Drag('div2');
}
function Drag(id) {
  var _this=this;
  this.disX=0;
  this.disY=0;
  this.oDiv = document.getElementById(id);
  this.oDiv.onmousedown = function(){
    _this.fnDown()
  };
}
Drag.prototype.fnDown=function (ev) {
  var ev = ev || event;
  var _this=this;
  this.disX = ev.clientX - this.oDiv.offsetLeft;
  this.disY = ev.clientY - this.oDiv.offsetTop;
  document.onmousemove = function(){
    _this.fnMove();
  };
  document.onmouseup =function(){
    _this.fnUp();
  };
}
Drag.prototype.fnMove=function(ev) {
  var ev = ev || event;
  this.oDiv.style.left = ev.clientX - this.disX + 'px';
  this.oDiv.style.top = ev.clientY - this.disY + 'px';
}
Drag.prototype.fnUp=function () {
  document.onmousemove = null;
  document.onmouseup = null
}
</script>
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>面向对象的继承-2</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#div2 {width: 100px; height: 100px; background: red; position: absolute;top:120px;}
</style>
<script>
window.onload=function(){
  new Drag('div1');
  new Drag('div2');
}
function Drag(id) {
  var _this=this;
  this.disX=0;
  this.disY=0;
  this.oDiv = document.getElementById(id);
  this.oDiv.onmousedown = function(){
    _this.fnDown()
  };
}
Drag.prototype.fnDown=function (ev) {
  var ev = ev || event;
  var _this=this;
  this.disX = ev.clientX - this.oDiv.offsetLeft;
  this.disY = ev.clientY - this.oDiv.offsetTop;
  document.onmousemove = function(){
    _this.fnMove();
  };
  document.onmouseup =function(){
    _this.fnUp();
  };
}
Drag.prototype.fnMove=function(ev) {
  var ev = ev || event;
  this.oDiv.style.left = ev.clientX - this.disX + 'px';
  this.oDiv.style.top = ev.clientY - this.disY + 'px';
}
Drag.prototype.fnUp=function () {
  document.onmousemove = null;
  document.onmouseup = null
}
</script>
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

javascript闭包概念简单解析(推荐)
下面小编就为大家带来一篇javascript闭包概念简单解析(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
原生javascript获取元素样式属性值的方法
实际应用中, 获取元素样式在实际应用中一定常用到, 若是纯粹html中, 直接elem.style.attr就可获取, 但更多的时候我们是要从Css中获取元素的最终样式属性.
2010-12-12
JavaScript内置对象之Array的使用小结
这篇文章主要介绍了JavaScript内置对象之Array的使用小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
JavaScript Reduce使用详解
这篇文章主要介绍了JavaScript Reduce使用的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下
2021-03-03
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
这篇文章主要介绍了让javascript加载速度倍增的方法,通过document.write输出js解决广告加载速度慢的问题,需要的朋友可以参考下
2014-12-12
ajax请求get与post的区别总结
本篇文章是对ajax请求get与post的区别进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
子窗体与父窗体传值示例js代码
子窗体与父窗体之见互相传值实现使用中很频繁，本文以一个小示例抛砖引玉，希望大家可以举一反三
2013-08-08
JS+php后台实现文件上传功能详解
这篇文章主要介绍了JS+php后台实现文件上传功能,结合实例形式分析了javascript前台表单数据提交与后台php文件传输处理相关操作技巧,需要的朋友可以参考下
2019-03-03
js仿腾讯QQ的web登陆界面
这篇文章主要为大家详细介绍了JavaScript模仿腾讯QQ的web登陆界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
js实现继承的方法及优缺点总结
这篇文章主要给大家介绍了关于js实现继承的方法及优缺点的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05