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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
vue基于element的区间选择组件
Sep 07 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
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/09/01 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python日志模块logging基本用法分析
2018/08/23 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python+flask实现API的方法
2018/11/21 Python
python数据挖掘需要学的内容
2019/06/23 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
刑事撤诉申请书
2015/05/18 职场文书
升学宴祝酒词
2015/08/11 职场文书