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

来源：互联网发布：android源码预装apk 编辑：程序博客网时间：2024/06/08 06:39

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>

图示如下

这里写图片描述

阅读全文

0 0