JavaScript实现九宫格拖拽效果

本文实例为大家分享了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>

这是效果图

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

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

(0)

相关推荐

  • JavaScript实现图片的放大缩小及拖拽功能示例

    本文实例讲述了JavaScript实现图片的放大缩小及拖拽功能.分享给大家供大家参考,具体如下: 实现效果如下: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{width:400px;height:400px;overflow:

  • 原生js实现九宫格拖拽换位

    使用原生JS写出一个九宫格,实现九个格子何以拖拽换位的效果,供大家参考,具体内容如下 效果演示 具体思路分析和代码: 图解1: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

  • javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • Sortable.js拖拽排序使用方法解析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上     ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上     ondragover 事件:拖拽元素在目

  • js实现拖拽效果

    首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20

  • 使用javaScript实现鼠标拖拽事件

    本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3

  • JS实现的文件拖拽上传功能示例

    本文实例讲述了JS实现的文件拖拽上传功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS文件拖拽上传</title> <style> div{ width: 300px; height: 300px; border:1px dashed #000; position:

  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • 使用js实现的简单拖拽效果

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <ti

随机推荐