js面向对象方式实现拖拽

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

propoet

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

阅读量251

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/u013482875/article/details/84888125

版权

javascript基础专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: red;
    }
</style>
<div id="box"></div>
<script>


    function  drag(id) {
        var _this = this
        this.disX=0;
        this.disY=0;
        this.ele = document.querySelector(id)
        var docClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var docClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        this.maxX = docClientWidth - this.ele.offsetWidth
        this.maxY = docClientHeight - this.ele.offsetHeight
        this.ele.onmousedown = function (ev) {
            _this.fnDown(ev)
            return false;
        }
    }
    drag.prototype.fnDown=function(ev) {
        var _this = this

        var oEvent = ev || event;
        this.disX= oEvent.clientX - this.ele.offsetLeft;
        this.disY = oEvent.clientY - this.ele.offsetTop
        document.onmousemove = function(ev){
            _this.fnMove(ev)
        }
        document.onmouseup = function(){
            _this.fnUp()
        }
    }
    drag.prototype.fnMove=function(ev) {
        var oEvent = ev || event
        var left = oEvent.clientX - this.disX
        var top = oEvent.clientY - this.disY
        if (left < 0) {
            left = 0
        } else if (left > this.maxX) {
            left = this.maxX
        }
        if (top < 0) {
            top = 0
        } else if (top > this.maxY) {
            top = this.maxY
        }
        this.ele.style.left = left + "px"
        this.ele.style.top = top + 'px'
    }

    drag.prototype.fnUp=function() {
        document.onmousemove = null;
        document.onmousedown = null;
    }

    var d = new drag('#box')
</script>

</body>
</html>

propoet

关注

0
点赞
踩
0

收藏

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

&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;
复制链接

扫一扫