拖拽（面向过程+面向对象）

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

置顶栈长

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

阅读量318

点赞数

CC 4.0 BY-SA版权

分类专栏：面向对象案类文章标签： js拖拽面向过程的拖拽面向对象的拖拽拖拽

本文链接：https://blog.youkuaiyun.com/wdzhszyq/article/details/73844736

面向对象同时被 2 个专栏收录

14 篇文章

订阅专栏

案类

4 篇文章

订阅专栏

1.面向过程的拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        body{
            background: #000;
        }
        div{
            width: 100px;
            height: 100px;
            border-radius: 30px;
            margin-top: 10px;
            color: #fff;
            background: pink;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
<section id="box">
    <div>1</div>
</section>
</body>
<script>
    window.onload=function () {
        var box=document.getElementById('box');
        var div=box.getElementsByTagName('div')[0];
        console.log(div);

        div.onmousedown=function (ev) {
            var e=ev || event;
            var disX=e.clientX-div.offsetLeft;
            var disY=e.clientY-div.offsetTop;
            document.onmousemove=function (ev) {
                var e=ev || event;
                div.style.left=e.clientX-disX+'px';
                div.style.top=e.clientY-disY+'px';
                return false;
            };
            document.onmouseup=function () {
               document.onmousemove=null;
               document.onmmouseup=null;
            }
        }
    }
</script>
</html>

2.面向对象的拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        body{
            background: #000;
        }
        section{
            width: 600px;
            height: 600px;
            border: 1px solid #fffce7;
            position: relative;
        }
        #box div{
            width: 100px;
            height: 100px;
            border-radius: 30px;
            margin-top: 10px;
            color: #fff;
            background: pink;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            position: absolute;
            left:0;
            top:0;
        }
        #box2 div{
            width: 100px;
            height: 100px;
            border-radius: 30px;
            margin-top: 10px;
            color: #fff;
            background: pink;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            position: absolute;
            left:0px;
            top:0;
        }
    </style>
</head>
<body>
<section id="box">
    <div class="">1</div>
</section>
<section id="box2">
    <div class="">2</div>
</section>
</body>
<script>
    window.onload=function () {
        var t1=new Top('box');
        t1.into();
        var t2=new Top('box2');
        t2.into();
    };
    //属性
    var div=null;
    function Top(id) {
        var box=document.getElementById(id);
        this.div=box.getElementsByTagName('div')[0];//object
        this.disX=0;//object
        this.disY=0;//object
        this.into();//object
    }
    //方法
    Top.prototype.into=function() {
            var _this=this;
            this.div.onmousedown=function (ev) {
                var ev=ev || event;
                _this.fndown(ev);
            };//object
        };
        Top.prototype.fndown=function(ev) {
            var _this=this;
            this.disX=ev.clientX-this.div.offsetLeft;
            this.disY=ev.clientY-this.div.offsetTop;
            document.onmousemove=function (ev) {
                var ev=ev || event;
                _this.fnmove(ev);//object
            };
            document.onmouseup=function () {
                _this.fnup();//object
            };
            return false;
        };
        Top.prototype.fnmove=function(ev) {
            this.div.style.left=ev.clientX-this.disX+'px';
            this.div.style.top=ev.clientY-this.disY+'px';
        };
        Top.prototype.fnup=function() {
            document.onmousemove=null;
            document.onmmouseup=null;
        }
</script>
</html>

图示如下

这里写图片描述