原生js实现照片墙的效果（拖拽图片与另一张图片交换位置）

àì夳堔傛蜴生んèń 2022-05-29 12:50 184阅读 0赞

用到的功能有：

*  布局转换（将float布局转换为定位布局）
 *  图片拖拽效果的实现
 *  碰撞检测
 *  计算两点之间的斜线距离
 *  找最小值

具体的实现在代码中我都有注释，嗯，直接上代码。

注：这里还需要有一个运动框架，需要的请点击[js运动框架][js]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{margin:0px; padding:0px;}
            #box{width:340px; height:340px; margin:100px auto;}
            #box img{width:100px; height:100px; margin-left:10px; margin-top:10px;}
        </style>
    </head>
    <body>
    <div id="box">
        <img src="photo/a.jpg"/>
        <img src="photo/b.jpg"/>
        <img src="photo/c.jpg"/>
        <img src="photo/d.jpg"/>
        <img src="photo/e.jpg"/>
        <img src="photo/f.jpg"/>
        <img src="photo/g.jpg"/>
        <img src="photo/h.jpg"/>
        <img src="photo/j.jpg"/>
    </div>
    <script src="move.js"></script>
    <script>
        var oDiv = document.getElementById('box');
        var aImg = oDiv.getElementsByTagName('img');
        var arr=[];
        var zIndex = 2;
        for(var i=0; i<aImg.length; i++){//记录每一张图片的left和top的值
            arr.push([aImg[i].offsetLeft,aImg[i].offsetTop]);
        }
        for(var i=0; i<aImg.length; i++){//布局转换，将float布局转换为定位布局
            aImg[i].style.position = 'absolute';
            aImg[i].style.left = arr[i][0]+'px';
            aImg[i].style.top = arr[i][1]+'px';
            aImg[i].style.margin = 0;
    
    
        }
        for(var i=0; i<aImg.length; i++){
             aImg[i].index = i;
            drag(aImg[i]);
        }
        function drag(obj){//为每一张图片设置拖拽的功能
            obj.onmousedown = function(ev){
                var ev = ev||event;
                obj.style.zIndex = zIndex++;
                var disX = ev.clientX - obj.offsetLeft;
                var disY = ev.clientY - obj.offsetTop;
                document.onmousemove = function(ev){
                    obj.style.left = ev.clientX - disX +'px';
                    obj.style.top = ev.clientY - disY + 'px';
                    for(var i=0; i<aImg.length; i++){
                        aImg[i].style.border = '';
                    }
                    if(bian(obj)){
                        bian(obj).style.border = '2px solid yellow';
                    }
    
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                   var nImg = bian(obj);
                   var tem = 0;
                    if(nImg){
                        startMove(nImg,{left:arr[obj.index][0],top:arr[obj.index][1]});
                        startMove(obj,{left:arr[nImg.index][0],top:arr[nImg.index][1]});
                        tem = obj.index;//改变索引值
                        obj.index = nImg.index;
                        nImg.index = tem;
                        nImg.style.border = '';
                    }else{
                        startMove(obj,{left:arr[obj.index][0],top:arr[obj.index][1]});
                    }
    
    
                }
                return false;
            }
        }
        function bian(obj){//找最小值
            var value = 9999;
            var index = -1;
            for(var i=0; i<aImg.length; i++){
                if(closer(obj,aImg[i])&&obj!=aImg[i]){
                    var c = getdis(obj,aImg[i]);
                    if(c<value){
                        value = c;
                        index = i;
                    }
                }
    
            }
            if(index !=-1){
                return aImg[index];
            }else{
                return false;
            }
        }
        function getdis(obj1,obj2){//两点之间的距离
            var a = obj1.offsetLeft - obj2.offsetLeft;
            var b = obj1.offsetTop - obj2.offsetTop;
            return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
        }
        function closer(obj1,obj2){//碰撞检测
            var L1 = obj1.offsetLeft;
            var R1 = obj1.offsetLeft + obj1.offsetWidth;
            var T1 = obj1.offsetTop;
            var B1 = obj1.offsetTop+obj1.offsetHeight;
            var L2 = obj2.offsetLeft;
            var R2 = obj2.offsetLeft + obj2.offsetWidth;
            var T2 = obj2.offsetTop;
            var B2 = obj2.offsetTop+obj2.offsetHeight;
            if(L1>R2||R1<L2||T1>B2||B1<T2){
                return false;
            }else{
                return true;
            }
        }
    </script>
    </body>
    </html>

[js]: https://mp.csdn.net/postedit/79500236