js九宫格数字拖拽代码

PROMULGATOR

Ember

河南省洛阳市

← 原生js简书顶部滚动代码

→ js文章过滤指定内容

相关代码

js九宫格数字拖拽代码

鼠标事件代码

js鼠标事件（原创）

鼠标移入事件

鼠标点击事件

鼠标滑动事件

Html

Css

Js

#box {
	position:relative;
}
span {
	cursor:pointer;
	width:100px;
	height:100px;
	position:absolute;
	display:block;
	border-radius:10px;
	text-align:center;
	font-size:50px;
	line-height:100px;
}

var box = document.getElementById("box"); //通过id获取节点
for (var i = 0; i < 9; i++) {
    var span = document.createElement("span"); //创建标签节点
    box.appendChild(span); //将创建好的span节点追加到box里
    span.innerText = 1 + i; //span里的数字内容
    span.style.left = (i % 3) * (100 + 10) + "px"; //设置每个span距离可视区域左边的距离
    span.style.top = Math.floor((i / 3)) * (100 + 10) + "px"; //设置每个span距离可视区域顶部的距离
    span.style.background = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")"; //获取随机数改变rgba中的数值改变颜色	
}
var spans = box.children;
//循环得到鼠标按下时鼠标距离事件源的左边距和上边距
for (j = 0; j < spans.length; j++) {
    spans[j].onmousedown = function(e) {
        var evt = e || event;
        var x = evt.offsetX;
        var y = evt.offsetY;

var tzNode = this; //保存拖拽对象
        var clonenode = tzNode.cloneNode(); //克隆一个拖拽对象
        box.replaceChild(clonenode, tzNode); //用克隆对象替换拖拽对象
        clonenode.style.border = "1px dashed black"; //给克隆对象设置样式
        box.appendChild(tzNode); //将拖拽对象追加到div的最后
        tzNode.style.zIndex = 1; //设置拖拽对象的层叠顺序
        //鼠标移动时得到拖拽对象的坐标
        document.onmousemove = function(e) {
            var evt = e || event;
            var X = evt.clientX; //获得鼠标左边的距离
            var Y = evt.clientY; //获得鼠标上边的距离
            tzNode.style.left = X - x + "px";
            tzNode.style.top = Y - y + "px";
            return false;
        }
        //鼠标松开时，计算各个span距离拖拽对象的距离，使用勾股定理
        document.onmouseup = function() {
            var arr1 = [];
            var arr2 = [];
            for (i = 0; i < spans.length - 1; i++) {
                var a = tzNode.offsetLeft - spans[i].offsetLeft;
                var b = tzNode.offsetTop - spans[i].offsetTop;
                var z = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
                arr1.push(z);
                arr2.push(z);
            }
            //通过sort排序，得到最小值
            arr1.sort(function(a, b) {
                return a - b;
            })
            var minnum = arr1[0];
            //通过indexof得到最小值对应的最小值的索引，得到距离最近的span对象
            var minindex = arr2.indexOf(minnum);
            //交换位置，拖拽对象跟距离最近的span交换位置，克隆对象与最小的span交换位置
            tzNode.style.left = spans[minindex].style.left;
            tzNode.style.top = spans[minindex].style.top;
            spans[minindex].style.left = clonenode.style.left;
            spans[minindex].style.top = clonenode.style.top;
            //删除克隆对象，移除鼠标默认事件
            box.removeChild(clonenode);
            document.onmousemove = null;
            document.onmouseup = null;
        }
        return false;
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js九宫格数字拖拽代码



代码描述：实现数字方块的拖拽交换位置以及随机变色

更新时间：2020-07-31 00:29:17

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js九宫格数字拖拽代码 -jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号