JavaScript面向对象_拖拽

最新推荐文章于 2021-12-01 21:24:24 发布

longzhoufeng

最新推荐文章于 2021-12-01 21:24:24 发布

阅读量401

点赞数

分类专栏： javascript 文章标签： javascript 面向对象

本文链接：https://blog.csdn.net/longzhoufeng/article/details/75213347

版权

javascript 专栏收录该内容

159 篇文章 0 订阅

订阅专栏

面向对象有个前提：

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

longzhoufeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript面向对象_拖拽

<!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: absolut
复制链接

扫一扫