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


Posted in Javascript onJune 12, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试一下运行效果。

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

Javascript 相关文章推荐
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
在vue中使用setInterval的方法示例
Apr 16 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
小程序组件之自定义顶部导航实例
Jun 12 #Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 #Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 #Javascript
详解如何提升JSON.stringify()的性能
Jun 12 #Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 #Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python中的map、reduce和filter浅析
2014/04/26 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python 串行执行和并行执行实例
2020/04/30 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
投标承诺函范文
2015/01/21 职场文书
老人节主持词
2015/07/04 职场文书
大学生支教感言
2015/08/01 职场文书