原生js实现九宫格,全解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九宫格</title>
<style type="text/css">
*{
margin: ;
padding: ;
}
ul{
width: 320px;
height: 320px;
position: relative;
left: 300px;
top: 100px;
border: 1px solid red;
}
li{
list-style: none;
position: absolute;
width: 100px;
text-align: center;
line-height: 100px;
font-size: 18px;
height: 100px;
user-select: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> <script type="text/javascript">
var oUl=document.querySelector("ul");//获取第一个ul的dom
var aLis=document.querySelectorAll("li");//获取所有的li
var lt=mt=;//margin左和margin右值
function RandColor(){
return Math.floor(Math.random()*);//定义一个函数返回一个0-255之间的值
}
for(var i=;i<aLis.length;i++){
aLis[i].style.left=(i%)*(+lt)+"px";//通过取余运算对列排列
aLis[i].style.top=Math.floor(i/)*(+mt)+"px";//通过向下取整进行行排列
aLis[i].style.backgroundColor="rgb("+RandColor()+","+RandColor()+","+RandColor()+")";//背景色
aLis[i].innerText=i+;//li内的内容填充
aLis[i].onmousedown=function(e){//添加事件
var evt=e||event;
var dragNode=this;//把DOM对象(this)赋给dragNode,因为this指向问题,需要保存this
var cloneNode=dragNode.cloneNode();//克隆一个元素留在原地
dragNode.style.zIndex=;//拖拽时置于顶部
dragNode.style.border="2px solid black";//突出样式
oUl.replaceChild(cloneNode,dragNode);//把拖拽节点换成克隆节点
oUl.appendChild(dragNode);//把拖拽节点放到oUl尾部
var x=evt.offsetX;//鼠标在事件源的位置
var y=evt.offsetY;//鼠标在事件源的位置
document.onmousemove=function(e){
var evt=e||event;
var _x=evt.clientX-x-oUl.offsetLeft;//求坐标
var _y=evt.clientY-y-oUl.offsetTop; _x=_x< ? : _x>oUl.offsetWidth- ? oUl.offsetWidth- : _x;
_y=_y< ? : _y>oUl.offsetHeight- ? oUl.offsetHeight- : _y; dragNode.style.left=_x+"px";
dragNode.style.top=_y+"px"; }
document.onmouseup=function(){
var arr=[];//定义空数组用来存放dragNode每一个兄弟元素的坐标
aLis=oUl.children;
for(var i=;i<aLis.length-;i++){//开始存放
arr.push({left:aLis[i].offsetLeft,top:aLis[i].offsetTop})
}
var _x=dragNode.offsetLeft;
var _y=dragNode.offsetTop;
var resurt=[];//定义一个空的结果数组
var num=Infinity;//定义一个值用来保存结果的最小值
arr.forEach(function(item){
resurt.push(Math.sqrt(Math.pow(Math.abs(_x-item.left),)+Math.pow(Math.abs(_y-item.top),)));
if(num>Math.sqrt(Math.pow(Math.abs(_x-item.left),)+Math.pow(Math.abs(_y-item.top),))){
num=Math.sqrt(Math.pow(Math.abs(_x-item.left),)+Math.pow(Math.abs(_y-item.top),));
}
})
num=resurt.indexOf(num);//把resurt数组中的最小值的索引赋给num
//交换位置
dragNode.style.left=aLis[num].style.left;
dragNode.style.top=aLis[num].style.top;
aLis[num].style.left=cloneNode.style.left;
aLis[num].style.top=cloneNode.style.top;
//回置样式
dragNode.style.zIndex=;
dragNode.style.border="none";
oUl.removeChild(cloneNode);
document.onmouseup=null;
document.onmousemove=null;
}
}
}
</script>
</body>
</html>
原生js实现九宫格,全解析的更多相关文章
- 【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 原生js的联动全选
开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...
- 原生js 异步请求,responseXML解析
异步更新原理:用XMLHTTP发送请求得到服务器端应答数据,在不重新载入整个页面的情况下,用js操作Dom最终更新页面1.创建XMLHttp请求协议 function createXMLHttpReq ...
- 原生JS实现购物车全选多选按钮功能
对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...
- JS回调函数全解析教程
转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...
- 原生js中实现全选和反选功能
<!DOCTYPE html> <html> <head lang="en"> <meta char ...
- JS回调函数全解析教程（callback）
自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函数了.不懂啊,于是在google回调函数,发现网上的中文解释实在是 ...
- 原生JS实现九宫格拼图
实现这个案例,需要考虑到鼠标的拖拽效果(onmousedown/onmousemove/mouseup) 拖拽分解: 按下鼠标---->移动鼠标----->松开鼠标 1.给目标元素添加on ...
- 5大最新云原生镜像构建工具全解析，3个来自Google，你了解几个？
1云原生大背景下的镜像构建在分享开始,我想先跟大家简单聊一下云原生,可能不会详细展开,而是带领大家了解一下云原生对镜像构建方面的影响.第一,在接触云原生相关的技术时,无论是要解决开发.测试环境的问题, ...
随机推荐
- ffmpeg 转换 mp4 成 flv
参考资料: https://addpipe.com/blog/flv-to-mp4/ ffmpeg -i demo.mp4 -c:v libx264 -crf 19 demo.flv 或者 ffmpe ...
- 飞机躲避炮弹---java
最近闲来无事,花了一天多的时间写了一个小游戏,虽然说游戏本身很无聊吧,但是自己也从这个过程中学到了许多东西...分享一下. 代码内容自行理解吧... 层次结构: package cn.sxt.game ...
- 这 10 款良心 Windows 软件，改变你对国产的认知
提起国产 Windows 软件,你可能首先想到的是捆绑安装.弹窗广告.卸载残留等关键词.尽管一些所谓「大厂」的确致力于拉低业界的下限,但依然有开发者坚守底线,为改变整个生态圈而默默努力.今天,少数派就 ...
- linux 逆向映射机制浅析
2017-05-20 聚会回来一如既往的看了会羽毛球比赛,然后想到前几天和朋友讨论的逆向映射的问题,还是简要总结下,免得以后再忘记了!可是当我添加时间……这就有点尴尬了……520还在写技术博客…… 闲 ...
- jupyter notebook安装/代码补全/支持golang 踩坑记
安装(不要用root) 安装anaconda3,然后ln -s bin目录下的jupyter命令到/usr/bin目录下 生成密码备用 敲ipython进入交互终端 In [1]: from note ...
- Jmeter学习之-获取登录的oken值（1）
ps: 这里只着重讲述如何实时获取其他接口返回的值,作为此次接口的参数传递,添加接口请求的相关不再详述,可查看上一篇文章 为了方便管理,此处将:登录接口单独放在一个线程组下面,需要使用登录接口返回的t ...
- python终端打印带颜色的print
原理 实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示 ...
- keras框架 反复调用model 模型 出错
Cannot interpret feed_dict key as Tensor: Tensor Tensor("Placeholder_8:0", shape=(3, 3, 12 ...
- python数据结构-如何统计序列中元素的频度
如何统计序列中元素的频度 问题举例 如何找出随机序列[1, 5, 6, 5, 3, 2, 1, 0, 6, 1, 6]中出现频度最高的3个元素? 如何统计某篇英文文章中词频最高的5个单词? 将序列转换 ...
- c# 传入c++dll 回调函数输出byte 导致 bug