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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
Cocos2d实现刮刮卡效果
Dec 20 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
CI框架Session.php源码分析
2014/11/03 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python的继承知识点总结
2018/12/10 Python
Python的UTC时间转换讲解
2019/02/26 Python
WxPython建立批量录入框窗口
2019/02/27 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
汽车工程专业应届生求职信
2013/10/19 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
催款通知书范文
2015/04/17 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python