JavaScript使用面向对象实现的拖拽功能详解-创新互联

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

创新互联从2013年创立，先为大姚等服务建站，大姚等地企业，进行企业商务咨询服务。为大姚企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

面向对象有个前提：

前提：所有东西都必须包含在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>

当前文章：JavaScript使用面向对象实现的拖拽功能详解-创新互联
转载注明：https://www.cdcxhl.com/article46/cdiseg.html

成都网站建设公司_创新互联，为您提供移动网站建设、搜索引擎优化、定制网站、微信公众号、网站制作、网站改版

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容