js面向对象实例(实现简易版拖拽)

zhouyiersan

于 2016-12-25 13:04:15 发布

阅读量913

点赞数 1

分类专栏： js学习原创文章标签： html javascript 面向对象

本文链接：https://blog.csdn.net/zhouyi_nodejs/article/details/53869371

版权

js学习原创专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #div{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
    }
    </style>
</head>
<body>
<div id="div"></div>
<script>

function fn() {
    this.div = document.getElementById('div');
    this.init();
}
fn.prototype.init = function () {
    var _this = this;
    this.div.addEventListener("mousedown", fnDown);

    function fnDown(e) {
        _this.dirX = e.pageX - this.offsetLeft;
        _this.dirY = e.pageY - this.offsetTop;
        document.onmousemove = function (e) {
            _this.fnMove(e);
        }
        document.onmouseup = function () {
            _this.fnUp();
        }
    }
}
fn.prototype.fnMove = function (e) {
    var _this = this;
    _this.div.style.left = e.pageX - _this.dirX + 'px';
    _this.div.style.top = e.pageY - _this.dirY + 'px';
};
fn.prototype.fnUp = function () {
    document.onmousemove = document.onmouseup = null;
};
var fn1 = new fn();

</script>
</body>
</html>

zhouyiersan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js面向对象实例(实现简易版拖拽)

Document#div{width: 100px;height: 100px;background: red;position: absolute;top: 0;left: 0;}function fn(){this.div = document.getElementById('div');this.init();}
复制链接

扫一扫

专栏目录