js面向对象---拖拽

最新推荐文章于 2021-03-01 18:25:19 发布

sweetllh

最新推荐文章于 2021-03-01 18:25:19 发布

阅读量234

点赞数

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

本文链接：https://blog.csdn.net/sweetllh/article/details/73927419

版权

面向对象专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                position: relative;

            }
            #box{
                position: absolute;
                width: 150px;
                height: 150px;
                background: #f00;
                cursor: default;
            }

            #box2{
                position: absolute;
                left: 300px;
                top: 300px;
                width: 150px;
                height: 150px;
                background: #00f;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <div id="box2"></div>
    </body>
    <!--面向过程的写法-->
    <!--<script type="text/javascript">
        var oBox = document.getElementById('box');
        var disX = 0;
        var disY = 0;
        oBox.onmousedown = function(ev){
            var ev = ev || window.event;
            var disX = ev.clientX -  oBox.offsetLeft;
            var disY = ev.clientY -  oBox.offsetTop;

            document.onmousemove = function(ev){
                var ev = ev || window.event;
                oBox.style.left = ev.clientX - disX + "px";
                oBox.style.top = ev.clientY - disY + "px";
            };

            document.oonmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        }
    </script>-->



    <!--面向过程改成面向对象的方法
    1、onload里面创建实例使用方法
    2、全局变量就是属性
    3、函数就是方法
    4、改变this指针,this指向object-->




    <!--面向对象的写法-->
    <script type="text/javascript">
        window.onload = function(){
            var d1 = new Drag('box');
            d1.init();

            var d2 = new Drag('box2');
            d2.init();
        }

    //  构造函数
    function Drag(id){
        this.oBox = document.getElementById(id);
        this.disX = 0;
        this.disY = 0;
    }

    //方法            ev事件写在函数下面
    Drag.prototype.init = function(){
        var _this = this;
        this.oBox.onmousedown = function(ev){
            var ev = ev || window.event;
            _this.fnDown(ev);
        };
    }


    Drag.prototype.fnDown = function(ev){
        var _this = this;
        this.disX = ev.clientX -  this.oBox.offsetLeft;
        this.disY = ev.clientY -  this.oBox.offsetTop;
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            _this.fnMove(ev);
        };
        document.onmouseup = function(){
            _this.fnUp();
        };
        return false;
    }


    Drag.prototype.fnMove = function(ev){
        this.oBox.style.left = ev.clientX - this.disX + "px";
        this.oBox.style.top = ev.clientY - this.disY + "px";
    }


    Drag.prototype.fnUp = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    }
    </script>
</html>

sweetllh

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ position: relative; } #
复制链接

扫一扫

专栏目录