| 本文实例为大家分享了一个用原生JS实现的可拖拽照片墙，效果如下： 
实现代码如下： <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽照片墙，实现照片互换位置</title> <style> * { margin: 0; padding: 0; } #ul1 { width: 660px; position: relative; margin: 10px auto; } #ul1 li { width: 200px; height: 150px; float: left; list-style: none; margin: 10px; z-index: 1; } #ul1 .active { border: 1px dashed red; } </style> <script src="js/move.js"></script> <script> window.onload = function () { var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); var aPos = []; var iMinZindex = 2; var i = 0; //布局转换 //获取当前布局图片的位置 for (i = 0; i < aLi.length; i++) { aPos[i] = { left: aLi[i].offsetLeft, top: aLi[i].offsetTop }; } //布局转换必须要两个for循环才能完成 for (i = 0; i < aLi.length; i++) { //为每个图片位置赋值 aLi[i].style.left = aPos[i].left + 'px'; aLi[i].style.top = aPos[i].top + 'px'; //转换定位 aLi[i].style.position = 'absolute'; //offset的值经已经包括的margin值，所以要取消 aLi[i].style.margin = '0'; aLi[i].index = i; } //循环拖拽 for (i = 0; i < aLi.length; i++) { setDrag(aLi[i]); } function setDrag(obj) { //当鼠标按下时 obj.onmousedown = function (ev) { //事件兼容 var oEvent = ev || event; //将当前图片的堆叠顺序增加 obj.style.zIndex = iMinZindex++; //计算鼠标相对于拖拽对象左上角的位置 var disX = oEvent.clientX - obj.offsetLeft; var disY = oEvent.clientY - obj.offsetTop; //当鼠标移动时 document.onmousemove = function (ev) { //事件兼容 var oEvent = ev || event; //重新为图片位置赋值 obj.style.left = oEvent.clientX - disX + 'px'; obj.style.top = oEvent.clientY - disY + 'px'; //清空所有li的样式 for (i = 0; i < aLi.length; i++) { aLi[i].className = ''; } //获取当前拖拽对象的最近目标对象 var oNear = findNearest(obj); //如果存在 if (oNear) { //将该对象的class赋于active oNear.className = 'active'; } }; //当鼠标松开时 document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; //获取当前拖拽对象的最近目标对象 var oNear = findNearest(obj); //如果有最近的碰撞对象 if (oNear) { oNear.className = ''; //将最近目标对象的zIndex加加 //防止从背面移动 oNear.style.zIndex = iMinZindex++; //当前拖拽对象移到目标对象之上时位于目标对象之上 obj.style.zIndex = iMinZindex++; //将最近目标对象(oNear)移到当前对象(obj)位置 startMove(oNear, aPos[obj.index]); //将当前对象(obj)移到最近目标对象(oNear)位置 startMove(obj, aPos[oNear.index]); //交换当前拖拽对象与目标对象的index值 var tmp = 0; tmp = obj.index; obj.index = oNear.index; oNear.index = tmp; //如果没有最近的碰撞对象 } else { //回到原位 startMove(obj, aPos[obj.index]); } }; //清除定时器 //防止图片在移位过程中再次拖动出现抖动 clearInterval(obj.timer); //防止浏览器bug，拖拽时鼠标指针变形 return false; }; } //碰撞检测 function cdTest(obj1, obj2) { //目标1的左右上下轮廓位置 var l1 = obj1.offsetLeft; var r1 = obj1.offsetLeft + obj1.offsetWidth; var t1 = obj1.offsetTop; var b1 = obj1.offsetTop + obj1.offsetHeight; //目标2的左右上下轮廓位置 var l2 = obj2.offsetLeft; var r2 = obj2.offsetLeft + obj2.offsetWidth; var t2 = obj2.offsetTop; var b2 = obj2.offsetTop + obj2.offsetHeight; //对两个目标的外轮廓线进行对比,以检测是否碰撞到了 if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) { return false; } else { return true; } } //计算拖拽对象和其它对象的连线距离 function getDis(obj1, obj2) { var a = obj1.offsetLeft - obj2.offsetLeft; var b = obj1.offsetTop - obj2.offsetTop; return Math.sqrt(a * a + b * b); } //找到碰上的，并且最近的 function findNearest(obj) { //为找出最小值做的参照数值 var iMin = 999999999; var iMinIndex = -1; for (i = 0; i < aLi.length; i++) { //避免自身与自身相碰撞,跳过检测 if (obj == aLi[i]) { continue }; //如果找到碰撞对象 if (cdTest(obj, aLi[i])) { //计算拖拽对象与每个li的距离 var dis = getDis(obj, aLi[i]); //如果当前参照距离大于某一个li与当前拖拽对象的距离 if (iMin > dis) { //重新赋值参照距离(多次比对，得出最小值) iMin = dis; //得出最近目标的下标 iMinIndex = i; } } } //iMinIndex为-1，代表始终没有碰到 if (iMinIndex == -1) { return null; //否则 } else { //返回碰撞最近的那个li return aLi[iMinIndex]; } } }; </script></head> <body> <ul id="ul1"> <li><img src="images/0.jpg" /></li> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> <li><img src="images/0.jpg" /></li> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> </ul></body> </html>以下是上面代码中引入的move.js文件，主要用于实现运动效果，代码如下： function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; }} function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bStop = true; for (var attr in json) { var iCur = 0; if (attr == 'opacity') { iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100); } else { iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (json[attr] - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != json[attr]) { bStop = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')'; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) { fn(); } } }, 30)}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
原生JS实现目录滚动特效
原生JS实现非常好看的计数器 |
