js面向对象练习（一）：拖曳效果

最新推荐文章于 2022-05-14 14:06:51 发布

weixin_33825683

最新推荐文章于 2022-05-14 14:06:51 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/561936

本文介绍了一个简单的可拖动元素的实现方案，使用HTML和JavaScript创建了一个红色方块，并允许用户在浏览器窗口内对其进行拖动。通过监听鼠标事件并计算位置变化来更新元素的位置。

html:

<!DOCTYPE html>

<html>

<head>

<meta charset= "utf-8">

<title></title>
<!--<script src="jquery-1.9.1.min.js"></script>-->
 
<style>
 
#drag{

    background: red;

    width: 200px;

    height: 200px;

    cursor: move;

    position: fixed;

    top: 0;

    left: 0;
}

</style>

</head>

<body>

    <div id="drag"></div>

<script src="scripts/test.js"></script>

</body>

</html>

js:

window.onload = function(){
    var drag = new Drag("drag");
    drag.init();
}
//获取浏览器窗口宽度
function getInner(){
    var pageWidth = window.innerWidth;
    var pageHeight = window.innerHeight;
    if(typeof pageWidth != "number"){
        if(document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        }else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }
    return {width:pageWidth,height:pageHeight};
}
//构造函数
function Drag(id){
    this.obj = document.getElementById("drag");
    this.disx = 0;
    this.disy = 0;
}
 
Drag.prototype.init = function(){
    //this 指针
    var me = this;
    this.obj.||event;
        me.onmouseDown(e);
        //阻止默认事件
        return false;
    }
}
 
Drag.prototype.onmouseDown = function(e){
    //this指针
    var me = this;
    this.disx = e.clientX - this.obj.offsetLeft;
    this.disy = e.clientY - this.obj.offsetTop;
    document.||event;
        me.onmouseMove(e);
    }
    document.onmouseup = function(){
        me.mouseUp();
    }
}
 
 
Drag.prototype.onmouseMove = function (e){
    //this指针
    var lf = e.clientX - this.disx;
    var tp = e.clientY - this.disy;
     
    if(lf < 0){ //防止拖曳层超出左边界
        lf = 0;
    }else if(lf > getInner().width - this.obj.offsetWidth){
        lf = getInner().width - this.obj.offsetWidth;//防止拖曳层超出右边界
    }
    if(tp < 0){
        tp = 0;//防止拖曳层超出上边界
    }else if(tp > getInner().height - this.obj.offsetHeight){
        tp = getInner().height - this.obj.offsetHeight;//防止拖曳层超出下边界
    }
    this.obj.style.left = lf + 'px';
    this.obj.style.top = tp + 'px';
};
 
Drag.prototype.mouseUp = function (){
 document.onmousemove = null;
 document.onmouseup = null;
};



本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1886642