jq版的九宫格拖拽换位置和随机位置（照片墙的拖拽换位置和随机位置）

1、需求jquery.js库，
2、事件需要 click，mousedown，mousemove，mouseup，
3、碰撞检测，用循环检测每个li，如果碰撞返回当前li的下标，通过下标给li添加border
html、布局

    

        

            

            

            

            

            

            

            

            

            

        
    
    随机

css样式

* {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        #box {
            width: 660px;
            border: 1px solid grey;
            background: #eee;
            margin: 0 auto;
        }
        #box>ul {
            position: relative;
            width: 100%;
            height: 660px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        #box>ul>li {
            width: 200px;
            height: 200px;
            background: red;
        }
        img {
            width: 100%;
            height: 100%;
        }
        a {
            position: absolute;
            top: 100px;
            left: 30px;
        }

js代码

全部代码

    
    
    
    
    
    
    



    

        

            

            

            

            

            

            

            

            

            

        
    
    随机

本文章为个人所写，并非转载！