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

最新推荐文章于 2024-08-21 15:02:16 发布
最新推荐文章于 2024-08-21 15:02:16 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： jq jquery操作 文章标签： jq版的九宫格拖拽换位置和随机位置 九宫格拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Absolon_/article/details/88403288
版权

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

<body>
    <div id="box">
        <ul>
            <li><img src="./img/0.jpg" alt=""></li>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
            <li><img src="./img/6.jpg" alt=""></li>
            <li><img src="./img/7.jpg" alt=""></li>
            <li><img src="./img/8.jpg" alt=""></li>
        </ul>
    </div>
    <a href="jacascript:;">随机</a>
</body>

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代码

<script>
        $(function () {
            var arr = [];
            var oRan = [];
            var flog = true;
            for (let i = 0; i < $('li').length; i++) {
                arr.push({
                    l: $('li').eq(i).position().left,
                    t: $('li').eq(i).position().top
                })
            }
            for (let j = 0; j < $('li').length; j++) {
                $('li').eq(j).css({
                    position: 'absolute',
                    left: arr[j].l + 'px',
                    top: arr[j].t + 'px'
                })
            }
            $('a').click(function(){
                oRan = [];
                while(oRan.length < arr.length){
                    let num = ren(0,arr.length);
                        if(oRan.indexOf(num)==-1){
                            oRan.push(num)
                        }
                }
                for(let i = 0; i < $('li').length;i++){
                    $('li').eq(oRan[i]).animate({left:arr[i].l,top:arr[i].t})
                }
            })
            var posi = {x:0,y:0}
            $('li').mousedown(function(ev){
                if(!flog) return;
                flog = false;
                this.x = ev.clientX - $(this).position().left;
                this.y = ev.clientY - $(this).position().top;
                posi.x = $(this).position().left;
                posi.y = $(this).position().top
                $(document).mousemove((event)=>{
                    $(this).css({
                        left:event.clientX - this.x +'px',
                        top:event.clientY - this.y +'px'
                    })
                    let _index = near($(this));
                    if(_index!=-1){
                        $('li').css('border','none')
                        $('li').eq(_index).css('border','2px solid red')
                    }else{
                        $('li').css('border','none')
                    }
                    event.preventDefault && event.preventDefault();
                })
                $(document).mouseup(()=>{
                    $(document).off('mousemove');
                    $(document).off('mouseup')
                    let _index = near($(this));
                    $('li').css('border','none')
                    if(_index != -1){
                        Commutator($(this),$('li').eq(_index),posi)
                        return;
                    }
                    $(this).animate({left:posi.x+'px',top:posi.y+'px'},function(){
                        flog = true;
                    })
                })
            })
            //  互换位置
                function Commutator(obj1,obj2,arr){
                    obj1.animate({left:obj2.position().left+'px',top:obj2.position().top+'px'})
                    obj2.animate({left:arr.x+'px',top:arr.y+'px'},function(){
                        flog = true;
                    })
                }
            //  循环检测碰撞
                function near(obj){
                    let _index = -1
                    for(let i = 0 ;i < $('li').length;i++){
                            if(obj.index()  != i ){
                                if(collision(obj,$('li').eq(i))){
                                    _index = i
                                }
                            }
                    }   
                    return _index;
                }
            // 碰撞检测
            function collision(obj1, obj2) {
                var L1 = obj1.position().left;
                var R1 = L1 + obj1.width();
                var T1 = obj1.position().top;
                var B1 = T1 + obj1.height();

                var L2 = obj2.position().left;
                var R2 = L2 + obj2.width();
                var T2 = obj2.position().top;
                var B2 = T2 + obj2.height();

                if (R2 < L1 || B2 < T1 || T2 > B1 || L2 > R1) {  // 未碰撞成功的几种情况
                    return false;
                } else {
                    return true;
                }
            }
            // 随机函数
            function ren(n, m) {
                return parseInt(Math.random() * (m - n) + n);
            }
        })
    </script>

全部代码

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

<head>
    <style>
        * {
            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;
        }
    </style>
    <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>Document</title>
    <script src="./js/jquery.js"></script>
    <script>
        $(function () {
            var arr = [];
            var oRan = [];
            var flog = true;
            for (let i = 0; i < $('li').length; i++) {
                arr.push({
                    l: $('li').eq(i).position().left,
                    t: $('li').eq(i).position().top
                })
            }
            for (let j = 0; j < $('li').length; j++) {
                $('li').eq(j).css({
                    position: 'absolute',
                    left: arr[j].l + 'px',
                    top: arr[j].t + 'px'
                })
            }
            $('a').click(function(){
                oRan = [];
                while(oRan.length < arr.length){
                    let num = ren(0,arr.length);
                        if(oRan.indexOf(num)==-1){
                            oRan.push(num)
                        }
                }
                for(let i = 0; i < $('li').length;i++){
                    $('li').eq(oRan[i]).animate({left:arr[i].l,top:arr[i].t})
                }
            })
            var posi = {x:0,y:0}
            $('li').mousedown(function(ev){
                if(!flog) return;
                flog = false;
                this.x = ev.clientX - $(this).position().left;
                this.y = ev.clientY - $(this).position().top;
                posi.x = $(this).position().left;
                posi.y = $(this).position().top
                $(document).mousemove((event)=>{
                    $(this).css({
                        left:event.clientX - this.x +'px',
                        top:event.clientY - this.y +'px'
                    })
                    let _index = near($(this));
                    if(_index!=-1){
                        $('li').css('border','none')
                        $('li').eq(_index).css('border','2px solid red')
                    }else{
                        $('li').css('border','none')
                    }
                    event.preventDefault && event.preventDefault();
                })
                $(document).mouseup(()=>{
                    $(document).off('mousemove');
                    $(document).off('mouseup')
                    let _index = near($(this));
                    $('li').css('border','none')
                    if(_index != -1){
                        Commutator($(this),$('li').eq(_index),posi)
                        return;
                    }
                    $(this).animate({left:posi.x+'px',top:posi.y+'px'},function(){
                        flog = true;
                    })
                })
            })
            //  互换位置
                function Commutator(obj1,obj2,arr){
                    obj1.animate({left:obj2.position().left+'px',top:obj2.position().top+'px'})
                    obj2.animate({left:arr.x+'px',top:arr.y+'px'},function(){
                        flog = true;
                    })
                }
            //  循环检测碰撞
                function near(obj){
                    let _index = -1
                    for(let i = 0 ;i < $('li').length;i++){
                            if(obj.index()  != i ){
                                if(collision(obj,$('li').eq(i))){
                                    _index = i
                                }
                            }
                    }   
                    return _index;
                }
            // 碰撞检测
            function collision(obj1, obj2) {
                var L1 = obj1.position().left;
                var R1 = L1 + obj1.width();
                var T1 = obj1.position().top;
                var B1 = T1 + obj1.height();

                var L2 = obj2.position().left;
                var R2 = L2 + obj2.width();
                var T2 = obj2.position().top;
                var B2 = T2 + obj2.height();

                if (R2 < L1 || B2 < T1 || T2 > B1 || L2 > R1) {  // 未碰撞成功的几种情况
                    return false;
                } else {
                    return true;
                }
            }
            // 随机函数
            function ren(n, m) {
                return parseInt(Math.random() * (m - n) + n);
            }
        })
    </script>
</head>

<body>
    <div id="box">
        <ul>
            <li><img src="./img/0.jpg" alt=""></li>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
            <li><img src="./img/6.jpg" alt=""></li>
            <li><img src="./img/7.jpg" alt=""></li>
            <li><img src="./img/8.jpg" alt=""></li>
        </ul>
    </div>
    <a href="jacascript:;">随机</a>
</body>

</html>

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

Absolon_
关注
专栏目录
微信小程序 - 最新图片组拖拽排序更换位置功能，类似微信朋友圈九宫格图片的拖动排序效果，微信小程序实现九宫格图片拖拽调换位置，小程序详细实现图像拖曳拖动切换位置排序功能（详细示例代码，一键复制开箱即用
高级前端工程师
04-01 3034
微信小程序，wechat，小程序，图片排序，图像排序，九宫格拖拽排序，拖曳，拖动，拖拽，仿微信朋友圈，朋友圈宫格图片排序，微信朋友圈图片拖动排序效果，实现九宫格图片拖拽，图像拖拽排序组件插件，小程序实现拖拽图片切换图片位置，图片拖动互换位置，图像拖拽切换位置，九宫格图片组合拖动排序，交换九宫格图片的位置，小程序上传图片后,如何实现拖拽排序功能，小程序怎么实现图片拖拽排序，微信小程序图片上传，九宫格拖拽组件，选择图片并拖动_微信小程序图片拖拽，微信小程序长按拖拽排序，图像的拖拽移动，多图拖拽排序功能，实现九宫
jquery+ajax实现鼠标拖拽图片位置交换
05-31
原先图片位置是 img1 img2 img3 经过鼠标拖拽后变成 img3 img2 img1
JQuery实现移动9宫格图片自由切换移动
Remind_hh的博客
04-17 3198
这篇文章主要介绍了通过JQuery实现移动9宫格的前端页面特效，用户可以自由选择任意2张图片，被选中的2张图片会自动交换位置。 实现方法：html和css在页面上静态地实现9宫格，用9张图片填充这9个格子，然后使用jquery动态实现图片自由切换移动。 实现思路：当鼠标点击其中任意一张图片时，我们利用jquery克隆此包含了此图片的div块并隐藏它。然后在鼠标移动事件中监听鼠标停止事件，当鼠标
javascript拖拽元素交换位置
最新发布
weixin_43493318的博客
08-21 156
javascript拖拽元素交换位置。
JQ 照片墙效果
dbfgefai009910的博客
10-24 255
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>pic</title><link rel="stylesheet" href= "//cdn.bootcss.com/animate.css/3.5.2/animate.min.css...
jquery实现照片墙
ephemeral_x的博客
06-20 819
实现好看的照片墙【JQuery】
原生js写的九宫格随机位置的照片墙
Absolon_的博客
02-19 1607
九宫格随机位置的照片墙 1、需要用一个数组来记录九宫格的位置 2、需要一个数组，用来记录一下随机出现li的下标 3、写一个随机函数。 首先css代码，布局一个九宫格 body, div, h2, ul, li { margin: 0; padding: 0; } ...
javascript九宫格图片随机打乱位置的实现方法
10-20
这项功能使得用户能够在一个九宫格内看到一组图片，通过随机打乱这些图片的位置，增加游戏或展示的趣味性和互动性。 实现九宫格图片随机打乱位置的核心方法是利用JavaScript编程语言。在JavaScript中，我们可以操作...
vue项目中 基于vue-grid-layout开发的拖拽对换位置，九宫格拖拽排序，换位
csl125的博客
07-15 2304
安装： npm install vue-grid-layout --save & yarn add vue-grid-layout 1、使用vue-grid-layout开发的一款拖拽排序，项目拖走其他自动挤进一 效果如下： 代码如下： <template> <grid-layout :layout="layout" :auto-size="false" :col-num="3" :row-height="100"
Vue实现移动端拖拽交换位置
10-15
- `leftW`和`clientW`等变量用于计算元素的位置和大小，以便于在拖动时更新元素的坐标。 5. **拖动逻辑**： - `touchstart`事件中，初始化拖动状态，并记录触摸点。 - `touchmove`事件中，根据移动距离更新元素...
Android 仿微信发动态九宫格拖拽、删除功能
08-25
为了快速入手 Android 仿微信发动态九宫格拖拽、删除功能，我们可以使用 NineGridChooseImage 组件，该组件提供了九宫格拖拽和删除功能的实现。我们可以在 layout 文件中定义一个 NineGridChooseImage 组件，并在 ...
jQuery基于gridster.js可拖动网格布局插件.zip
09-22
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
jquery照片墙插件
12-10
photopile.js是一款jquery照片墙插件。该jquery照片墙插件的特点是兼容主流浏览器，照片可以使用鼠标进行拖拽，支持图片进行轮播，支持移动触摸事件。
jq照片墙 滚动加载瀑布流~
06-23
jq 写的照片墙~demo 原理很简单~ 自己写的
Jquery照片墙特效
10-21
免费资源 Jquery照片墙特效
jQuery制作照片墙
娇的博客
07-25 392
根据之前所学内容制作了照片墙，具体代码先不放，因为在这里有三个bug需要解决 处理bug 1、左键事件 bug问题：刚打开页面的时候，按一下左键没有任何变化，按两下才开始切换 思路： 说明问题出现在左键代码块中 按第二下才切换说明index有问题 在html中默认前面的内容会被后面的内容覆盖，在这里也一样，一组照片被进行绝对定位后，后面的图片也会覆盖前面的图片，所以总会显示最后一张 一开始定义的var index = 0 的index值和实际图片的index值不同 解决方法： 将自定义的index值和
jQuery简易照片墙
yf19990720的博客
08-12 451
jQuery照片墙 照片墙在网络上也是非常常见的东西，各式各样的照片墙，有着各式各样的新奇的特效 照片墙效果图 点击要查看的图片，然后图片放大，再次点击后还原 代码分析 首先设置出最开始的样式 <style> * { padding: 0; margin: 0; list-style: none; } html, body,
js jquery 实现拖动图片位移
u013141712的专栏
03-24 615
查找图片id，修改他的左右left 和top 或者是 margin-left等！ var csmImgViewer = document.getElementById('cms_viewer_img') csmImgViewer.onmousedown =function(){ //当前位置 var offsetX = csmImgViewer.offsetLeft; var offsetY = csmImgViewer.offsetTop; /
html九宫格排列图片,10款jQuery实现的360浏览器九宫格图片拖拽排序
weixin_31488273的博客
06-04 575
1.jQuery实现的带左右箭头宽屏幻灯片特效这是一款基于jQuery实现的带左右箭头宽屏幻灯片特效源码，是一款基于jquery.divas插件实现的网站宽屏幻灯片切换代码。通过左右箭头切换图片的时候会出现多层浮动显示的层叠效果。且画面切换流畅自然，是一款非常优秀的特效源码。2.jQuery实现的全屏3D旋转木马焦点图特效这是一款基于jQuery实现的全屏3D旋转木马焦点图特效源码，带左右箭头、带...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值