原生JS实现tab栏切换和拖拽效果

最新推荐文章于 2024-05-09 10:42:02 发布

西红柿炒番茄@ZXR

最新推荐文章于 2024-05-09 10:42:02 发布

阅读量390

点赞数 1

文章标签： javascript es6

本文链接：https://blog.csdn.net/weixin_46005715/article/details/115431231

版权

JavaScript HTML 交互拖拽事件处理

关键词由CSDN通过智能技术生成

<!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>
        #btns {
            width: 300px;
            height: 38px;
            list-style: none;
            border: 1px solid #f00;
            display: flex;
            margin: 0;
            padding: 0;
        }
        
        #btns li {
            flex: 1;
            line-height: 38px;
            text-align: center;
        }
        
        #content {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0;
            padding: 0;
            border: 1px solid green;
        }
        
        #content #count {
            display: none;
        }
    </style>
</head>

<body>
    <!--tab栏-->
    <div class="relative" style="position: relative; width: 500px; height: 500px; left: 50%; top: 50%; background-color: #f00;">
        <div id="dox" style="position: absolute; top: 50%; left: 50%;">
            <ul id="btns">
                <li id="btn">1</li>
                <li id="btn">2</li>
                <li id="btn">3</li>
            </ul>
            <ul id="content">
                <li id="count" style="display: block;">1</li>
                <li id="count">2</li>
                <li id="count">3</li>
            </ul>
        </div>
    </div>
    <input type="text" id="ipt" style="position: absolute;">
    <script>
        let btns = document.querySelectorAll('#btn');
        let count = document.querySelectorAll('#count');
        console.log(btns);
        console.log(count);
        btns.forEach((item, index) => {
            item.onclick = (() => {
                console.log(item, index);
                btns.forEach((a) => {
                        // a.style.color = 'black'
                    })
                    // item.style.color = 'red'
                count.forEach((b) => {
                    b.style.display = 'none'
                })
                count[index].style.display = 'block'
            })
        })

        // 拖拽事件
        let dox = document.querySelector('#dox');
        console.log(dox);
        dox.onmousedown = ((event) => {
            let disx = event.clientX - dox.offsetLeft;
            let disy = event.clientY - dox.offsetTop;
            console.log(disx);
            console.log(disy);
            document.onmousemove = ((event) => {
                dox.style.left = event.clientX - disx + 'px';
                dox.style.top = event.clientY - disy + 'px';
                console.log(dox.style.left);
                console.log(dox.style.top);
            })
            document.onmouseup = ((b) => {
                document.onmousemove = null
            })
        })
        let ipt = document.querySelector('#ipt');
        console.log(ipt);
        ipt.onmousedown = ((event) => {
                let disX = event.clientX - ipt.offsetLeft;
                let disY = event.clientY - ipt.offsetTop;
                console.log(disX);
                console.log(disY);
                document.onmousemove = ((a) => {
                    ipt.style.left = a.clientX - disX + 'px';
                    ipt.style.top = a.clientY - disY + 'px';
                })
                document.onmouseup = ((b) => {
                    document.onmousemove = null
                })
            })
            // let声明了可以不赋值但是const一旦声明就必须赋值
        let aa;
        console.log(aa);
        // const bb;
        // console.log(bb);
    </script>
</body>

</html>