js指定两个元素交换位置

最新推荐文章于 2024-08-21 15:02:16 发布

wxt_

最新推荐文章于 2024-08-21 15:02:16 发布

阅读量2.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/wxt_wjc/article/details/103939180

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

                        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM 数组 对象</title>
    <style>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .map{
            width: 450px;
            height: 450px;
            background-color: #ccc;

        }
        .map ul{
            width: 450px;
            height: 450px;
            position: relative;
        }
        .map ul li{
            width: 148px;
            height: 148px;
            border: 1px solid skyblue;
            float: left;
            text-align: center;
            font-size: 50px;
            line-height: 148px;
            cursor: pointer;
        }
    </style>
    <script src="../js/deepCopy.js"></script>
    <script src="../js/09.animate.js"></script>
</head>
<body>
    <div class="map">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

    <script>
        //1.0
        var items = document.getElementsByTagName("li");
        //2.0定义数组记录li标签位置]
        var data = [];
        //3.0 循环
        for(var i = 0; i < items.length ; i++){
            //4.0 把每个li标签坐标信息存放在空对象
            var obj = {};
            //5.0 记录li标签坐标
            obj.x = items[i].offsetLeft;
            obj.y = items[i].offsetTop;
            //6.0 坐标信息添加到数组
            data.push(obj);     
        }
        // console.log(data)
        function romdom_255(){
            return Math.floor(Math.random()*256)
        }
        //7.0 
        function render(data){
            var arr = []
            for (let j = 0; j < data.length; j++) {
                //7.0.1 设置每个li标签的绝对定位
                items[j].style.position = "absolute";
                items[j].style.left = data[j].x + "px";
                items[j].style.top = data[j].y + "px";
                items[j].style.backgroundColor = "rgba("+romdom_255()+","+romdom_255()+","+romdom_255()+")"

                //7.0.2属性绑定
                items[j].index = j;
                //7.0.3事件绑定
                items[j].onclick = function(){
                    var point = {
                        x: data[this.index].x,
                        y: data[this.index].y,
                        ele: this,
                        index: this.index
                    };
                    arr.push(point);
                    console.log(arr)
                    if(arr.length == 2){
                        //参数1.dom  参数2.css对象
                        animate(arr[0].ele,{
                            left: arr[1].x,
                            top: arr[1].y
                            
                        })
                        animate(arr[1].ele,{
                            left: arr[0].x,
                            top: arr[0].y
                        })
                        //数据交换位置
                        //在数组data上 交换两个元素的坐标
                        data[arr[0].index].x = arr[1].x
                        data[arr[0].index].y = arr[1].y
                        
                        data[arr[1].index].x = arr[0].x
                        data[arr[1].index].y = arr[0].y

                        //重置数据
                        arr = [];
                    }
                }
            }
        }
        render(data);

    </script>
</body>
</html>