JavaScript实现九宫格拖拽效果


Posted in Javascript onJune 28, 2022

本文实例为大家分享了JavaScript实现九宫格拖拽效果的具体代码,供大家参考,具体内容如下

关于一些拼图游戏什么的,见人家效果做的不错,参考下别人写的代码,我也尝试着做了个。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            #wrap{
                position: relative;
            }
            #wrap div{
                position: absolute;
                width: 100px;
                height: 100px;
                font-size: 50px;
                text-align: center;
                line-height: 100px;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <div id="wrap"></div>
        <script type="text/javascript">
            //生成结构
            var oWrap = document.getElementById("wrap");
            var mt = ml = 10;
            for(var i = 0; i < 3; i++){
                for(var j = 0; j < 3; j++){
                    var oDiv = document.createElement("div");
                    oWrap.appendChild(oDiv);
                    oDiv.style.top = i*(oDiv.offsetHeight + mt) + "px";
                    oDiv.style.left = j*(oDiv.offsetWidth + ml) + "px";
                    oDiv.style.backgroundColor = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
                }
            }
            
            var arr = "ABCDEFGHI";
            
            var aItems = oWrap.children;
            var len = aItems.length;
            
            for(var i = 0; i < aItems.length; i++){
                aItems[i].innerHTML = arr[i];
            }
            //拖拽及交换位置
            
            for(var i = 0; i < aItems.length; i++){
                aItems[i].onmousedown = function(e){
                    var evt = e || event;
                    var x = evt.offsetX;
                    var y = evt.offsetY;
                    /*var x = evt.clientX - this.offsetLeft - oWrap.offsetLeft;
                    var y = evt.clientY - this.offsetTop - oWrap.offsetTop;*/
                    var _this = this;
                    
                    var cloneNode = this.cloneNode();
                    cloneNode.style.border = '1px dashed #cecece';
                    this.style.zIndex = 1;
                    oWrap.replaceChild(cloneNode,this);
                    oWrap.appendChild(this);
                    
                    document.onmousemove = function(e){
                        var evt = e || event;
                        var _left = evt.clientX - x - oWrap.offsetLeft;
                        var _top = evt.clientY - y - oWrap.offsetTop;
                        _this.style.left = _left + "px";
                        _this.style.top = _top + "px";
                        
                        return false;
                    }
                    
                    document.onmouseup = function(){
                        
                        //交换位置
                        var disArr = [];
                        var newArr = [];
                        console.log(aItems.length);
                        for(var i = 0; i < len; i++){
                            var disX = _this.offsetLeft - aItems[i].offsetLeft;
                            var disY = _this.offsetTop - aItems[i].offsetTop;
                            var dis = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2));
                            disArr.push(dis);
                            newArr.push(dis);
                        }
                        disArr.sort(function(a,b){
                            return a-b;
                        })
                        var minIndex = newArr.indexOf(disArr[0]);
                        
                        _this.style.left = aItems[minIndex].style.left;
                        _this.style.top = aItems[minIndex].style.top;
                        aItems[minIndex].style.left = cloneNode.style.left;
                        aItems[minIndex].style.top = cloneNode.style.top;
                        oWrap.removeChild(cloneNode);
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            }
            /*var arr = [45,32,11,90];
            var minVal = Math.min.apply(null,arr);
            var minIndex = arr.indexOf(minVal);
            console.log(minVal,arr,minIndex);*/
        </script>
    </body>
</html>

这是效果图

JavaScript实现九宫格拖拽效果

虽说实现了效果,但我写的还是不太严谨,还有诸多bug,比如上边做边没距离,实际写的话还要加上这个距离,即使距离为0,还有就是我发现拖拽的时候,如果使用qq截图的话,克隆的那个小方块没办法消失,只得重新刷新页面,有没有大佬解决下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。


Tags in this post...

Javascript 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
JS实现简单九宫格抽奖
Jun 28 #Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 #Javascript
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
小程序自定义轮播图圆点组件
Jun 25 #Javascript
微信小程序实现轮播图指示器
Jun 25 #Javascript
create-react-app开发常用配置教程
Jun 25 #Javascript
You might like
PHP静态类
2006/11/25 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
php如何获取Http请求
2020/04/30 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
python版飞机大战代码分享
2018/11/20 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
编辑硕士自荐信范文
2013/11/27 职场文书
英文自荐信格式
2013/11/28 职场文书
美食节策划方案
2014/05/26 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
企业标语大全
2014/07/01 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
杨善洲电影观后感
2015/06/04 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
Django框架中模型的用法
2022/06/10 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python