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 相关文章推荐
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
JS判定是否原生方法
2013/07/22 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
使用python 获取进程pid号的方法
2014/03/10 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
python数据抓取3种方法总结
2021/02/07 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
初中作文评语
2014/12/25 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
教师远程研修感悟
2015/11/18 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL