原生js实现九宫格拖拽换位
使用原生JS写出一个九宫格，实现九个格子何以拖拽换位的效果，供大家参考，具体内容如下
效果演示
具体思路分析和代码：
图解1：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
思路梳理：
1，样式设置：在样式里最好使用定位来布局，不然以后拖拽代码会麻烦点儿。
（这里没有设置父容器的具体位置，如果设置了父容器的具体位置，则在移动
时top和left的值需要根据情况计算位置）
2，父容器盒子里的内容最好使用js代码来生成，方便使用和添加样式
2-1：（循环生成子元素）
我们子元素使用的定位布局，不难发现：每行的top值一样，每列的left值一样，因此循环生
成子元素我们可以使用3*3的循环嵌套来写，这样就可以讲每行的样式设置了。
2-2：（给循环生成的标签添加随机颜色和文字）
随机颜色我是用的时rgb()来实现的，文字可以使用ASCII码来生成，也可以使用字符串拼接
来生成，我这里使用ASCII码生成。
PS：这样我们的基本样式就设置完毕了，接下来就是设置拖拽的事件
3，给每一个元素添加事件，这里我们需要三个事件： onmousedown - onmousemove - onmouseup
3-1：（首先是按下事件 onmousedown）
当我们在对应子元素按下时，我们要获取鼠标到按下目标边框线内的距离，并且克隆这个元素，
将这个元素扔到父容器里面充当占位，（这里注意，克隆的这个节点在HTML结构里是放到最后
的，如果不处理后面会出BUG！！！）。
3-2：（然后处理移动事件 onmousemove）
在按下子元素块儿并且移动时，我们要给目标设置他的top和left值，来实现跟随移动，所以
我们需要获取鼠标到可视窗口的距离，目标的top和left值 = 鼠标到可视窗口的距离 - 鼠标
到目标边缘的距离（这里无边框，如果有需要额外减去边框宽度）。
PS：
这里存在一个BUG！！！！在拖拽时，存在一个默认事件--选中文字，当你松开之后，目
标还会跟着走，就算你关闭了onmousemove这个事件。所以这里需要阻止一下默认事件。
3-3：（最后处理抬起事件 onmouseup）这里也是最重要的一步！！！！
核心思想：
当鼠标抬起时，我们要计算当前移动目标的中心点和每一个子元素中心点的距离，
哪一个离得最近，和哪个交换位置（注意，这里存在一个BUG，这里的BUG就是
3-1 里提到的BUG，需要提前处理）。
具体过程：
3-3-1：
首先我们要进行循环，计算拖拽目标的中心点与每一个子元素的中心点的距离，具体
参照 图解1 。 （拖拽目标距离可视窗口的左边距 - 子元素距离可视窗口的左边
距）平方 + （拖拽目标距离可视窗口的上边距 - 子元素距离可视窗口的上边距）
平方。最后在开方，得到中心点的距离（注意3-1的BUG要处理掉，把，要把移动的
标签放到结构的最后，然后循环的时候将他排除掉，不然每次距离最近的都是它本身）。
3-3-2：
我们循环会得到我们想要的每一个距离，然后将这些距离放到一个数组里，并且再定
义一个数组备份一下，方便对照具体是哪个标签。
将其中一个数组进行排序，然后再备份数组中查一下最小的值在备份数组中的索引下
标，这个索引下标也就是对应的子元素了。
3-3-3：
然后将距离最近的子元素的 left和top值给 目标元素
然后将克隆的标签的 left和top值给 距离最近的子元素
最后在将克隆的标签移除掉
这里还是会有一个BUG！！！如果不在标签上按 直接抬起鼠标的话，会报错，这是因
为直接执行了onmouseup事件，所以需要移除掉onmouseup事件
-->
<style>
*{margin: 0;padding: 0;}
.father{position: relative;}
.father div{position: absolute;width: 100px;height: 100px;border-radius: 10px;text-align: center;line-height: 100px;font-size: 30px;cursor: pointer;}
</style>
</head>
<body>
<div class="father"></div>
<script>
// 3*3 循环生成子元素div,并给他们设置定位值
// 设定固定的margin值
var mT = 15;
var mL = 15;
var asc = 65;//ASCII码值
var oFather = document.querySelector('.father');
for(var i = 0; i < 3; i++){
for(var j = 0; j < 3; j++){
var oDiv = document.createElement('div');//创建子元素
oFather.appendChild(oDiv);
oDiv.style.left = j * (oDiv.offsetWidth + mL) +'px';
oDiv.style.top = i * (oDiv.offsetHeight + mT) +'px';
// 随机颜色设置
oDiv.style.background = 'rgb('+parseInt(Math.random()*256) + "," +parseInt(Math.random()*256) + ","+parseInt(Math.random()*256)+')';
// 加上字母
oDiv.innerText = String.fromCharCode(asc++);
}
}
// 为了方便理解，将事件写到了外面，这里可以生成标签循环内部
/* var oItem = document.querySelectorAll('.father>div');
这种方式获取的是静态集合，只会获取到初次页面加载的内容，用这种办法获取子元素会出BUG */
var oItem = oFather.children;
for(var k = 0 ;k<oItem.length; k++){
oItem[k].onmousedown = function(e){
var evt = e || event;
// 获取鼠标到目标边框内的距离
var x = e.offsetX;
var y = e.offsetY;
var tagNode = this;
// 克隆目标标签
var cloneNode = tagNode.cloneNode();
cloneNode.style.border = '1px dashed #fff';
oFather.appendChild(cloneNode);
tagNode.style.zIndex = 1;
// 在思路里提到过，这里存在一个BUG需要将克隆的和被拖拽换位置
oFather.replaceChild(cloneNode, tagNode);
oFather.appendChild(tagNode);
document.onmousemove = function(e){
var evt = e || event ;
var l = evt.clientX - x;
var t = evt.clientY - y;
tagNode.style.left = l + 'px';
tagNode.style.top = t + 'px';
// 阻止默认事件，防止bug
return false;
}
document.onmouseup = function(){
// 抬起鼠标后，要判断离那个最近，然后交换
var oldArr = [];
var newArr = [];
for(var l = 0; l<oItem.length - 1;l++){
var disX = tagNode.offsetLeft - oItem[l].offsetLeft;
var disY = tagNode.offsetTop - oItem[l].offsetTop;
// 勾股定理
var dis = Math.sqrt( Math.pow(disX,2) + Math.pow(disY,2) );
oldArr.push(dis);
newArr.push(dis);
}
// 将oldArr从小到大排序
oldArr.sort(function(a,b){return a-b});
var minIndex = newArr.indexOf(oldArr[0]);
console.log('oldArr' , oldArr, 'newArr' ,newArr);
// 将距离最近的元素的定位给移动的目标
tagNode.style.top = oItem[minIndex].style.top;
tagNode.style.left = oItem[minIndex].style.left;
// 把克隆的定位给距离最近的
oItem[minIndex].style.top = cloneNode.style.top;
oItem[minIndex].style.left = cloneNode.style.left;
//把克隆节点移除
oFather.removeChild(cloneNode);
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
ExtJS的拖拽效果示例
复制代码 代码如下: <html> <head> <title>hello</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="Stylesheet" type="text/css" href="http:10.19.1.55/lib
-
js实现使用鼠标拖拽切换图片的方法
本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan
-
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ插件的一个小练习. html为 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
-
原生JS实现拖拽图片效果
本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a
-
js实现拖拽效果
首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20
-
JS HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取
-
鼠标拖拽移动子窗体的JS实现
1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div> <div class="modal-window"> <div class="head"> <center>点住着块区域可以改
-
JS HTML5实现拖拽移动列表效果
练习HTML5中的拖放API,实现列表拖拽移动!参考文章:JS HTML5拖拽上传图片预览 HTML5拖拽移动列表实现思路: 1.循环设置每个子项的draggable属性,以及设置拖动标记(不会多个或全部子项都移动) 2.每次进入投放区,则检测时候有拖放标记,有则添加dom元素,以此类推 另一种实现思路是:可以利用拖放中DataTransfer对象作为属性,用setData()和getData()方法传递每个拖动的子项的id等数据,找到指定的子项进行移动-.待实验... HTML: //空列
-
使用js实现的简单拖拽效果
前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti
-
使用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