构造函数模式，工厂方法模式以及采用面向对象（class）的思路实现拖拽功能

最新推荐文章于 2024-07-26 11:41:15 发布

九九七七

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量119

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_54455551/article/details/124109514

版权

1, 采用面向对象的思路实现拖拽功能

2, 采用工厂模式, 创建一个函数, 将拖拽功能封装在函数内

3, 采用构造函数, 创建一个构造函数, 将拖拽功能封装在函数内

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            position: absolute;
        }
        p{
            background-color: cornflowerblue;
            position: absolute;
            cursor: pointer;
        }

    </style>
</head>

<body>
    <div></div>
    <p>我是一个p</p>
    <script>
        /* 
            1, 采用面向对象的思路实现拖拽功能
            2, 采用工厂模式, 创建一个函数, 将拖拽功能封装在函数内
            3, 采用构造函数, 创建一个构造函数, 将拖拽功能封装在函数内 
        */
        // 1、
        class Drag {
            // 传入需要拖动元素
            constructor(ele) {
                this.ele = ele
                // 获取元素的宽高的一半  
                this.width = ele.offsetWidth/2
                this.height = ele.offsetHeight/2
                // 点击事件 运动
                ele.onmousedown = (e) => {
                    e.preventDefault()
                    let offsetW = e.offsetX
                    let offsetH = e.offsetY
                    // console.log(offsetW,offsetH)
                    this.drag1(offsetW,offsetH)
                }
                // 停止
                document.onmouseup = () => {
                    this.drag2()
                }
            }
            // 执行
            drag1(offsetW,offsetH) {
                document.onmousemove = (e) => {
                    e = e || window.event
                    // 获取鼠标的位置
                    let x = e.clientX
                    let y = e.clientY
                    // 中心点拖拽
                    // this.ele.style.left = x - this.width + "px"
                    // this.ele.style.top = y - this.height + "px"
                    // 点击点拖拽
                    this.ele.style.left = x - offsetW + "px"
                    this.ele.style.top = y - offsetH + "px"
                }
            }
            // 停止
            drag2() {
                document.onmousemove = null
                // document.onmouseup = null
            }
        }
        let div = document.getElementsByTagName('div')[0]
        let drag = new Drag(div)
        let rr = document.getElementsByTagName('p')[0]
        let p = new Drag(rr)
        
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            position: absolute;
        }

        p {
            background-color: cornflowerblue;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div></div>
    <p>逆天邪神更新</p>
    <script>
        /* 
            1, 采用面向对象的思路实现拖拽功能
            2, 采用工厂模式, 创建一个函数, 将拖拽功能封装在函数内
            3, 采用构造函数, 创建一个构造函数, 将拖拽功能封装在函数内 
        */
        // 2、
        function drag(ele) {
            let obj = new Object()
            obj.ele = ele
            // 获取元素的宽高的一半  
            obj.width = ele.offsetWidth / 2
            obj.height = ele.offsetHeight / 2
            // 点击事件 运动
            obj.drag = () => {
                obj.ele.onmousedown = (e) => {
                    e.preventDefault()
                    let offsetW = e.offsetX
                    let offsetH = e.offsetY
                    // console.log(offsetW,offsetH)
                    drag1(offsetW, offsetH)
                }
                // 停止
                document.onmouseup = () => {
                    drag2()
                }

                function drag1(offsetW, offsetH) {
                    document.onmousemove = (e) => {
                        e = e || window.event
                        // 获取鼠标的位置
                        let x = e.clientX
                        let y = e.clientY
                        // 中心点拖拽
                        // obj.ele.style.left = x - obj.width + "px"
                        // obj.ele.style.top = y - obj.height + "px"
                        // 点击点拖拽
                        obj.ele.style.left = x - offsetW + "px"
                        obj.ele.style.top = y - offsetH + "px"
                        console.log("111")
                    }
                }
                // 停止
                function drag2() {
                    document.onmousemove = null
                }
            }
            return obj
        }


        let div = document.getElementsByTagName('div')[0]
        let drag1 = drag(div)
        drag1.drag()
        let rr = document.getElementsByTagName('p')[0]
        let p = drag(rr)
        p.drag()
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //构造器模式
        function drag(element){
            this.element = element
            //鼠标点击方法
            this.fnDown = function(){
                this.element.onmousedown = (e)=>{
                    e = e || window.event
                    this.element.x = e.offsetX //获取鼠标在盒子的x偏移量  //这个this指向盒子div
                    this.element.y = e.offsetY //获取鼠标在盒子的y偏移量
                    this.fnMove()
                    this.fnUp()
                }
                  
            }
            this.fnMove = ()=>{
                    document.onmousemove = (e)=>{
                        e = e || window.event
                        let targetX = e.clientX //获取移动鼠标移动后的x坐标
                        let targetY = e.clientY //获取移动鼠标移动后的y坐标
                        this.element.style.left = targetX-this.element.x+'px'
                        this.element.style.top = targetY-this.element.y+'px'
                    }
            }
            this.fnUp = function(){
                this.element.onmouseup = ()=>{
                    document.onmousemove = null  //this指向盒子div
                    //this.element.onmouseup = null//关闭自己的抬起事件，不会占用缓存
                    console.log("111")
                }
            }
        }
        let div = document.querySelector('div')
        let drag1 = new drag(div)
        drag1.fnDown() //调用
        // drag1.fnUp()
    </script>
</body>
</html>

九九七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
构造函数模式，工厂方法模式以及采用面向对象（class）的思路实现拖拽功能

1, 采用面向对象的思路实现拖拽功能2, 采用工厂模式, 创建一个函数, 将拖拽功能封装在函数内3,采用构造函数,创建一个构造函数,将拖拽功能封装在函数内<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
复制链接

扫一扫