?1 <!DOCTYPE html> ?2 <html> ?3 <head> ?4 ????<title>筱白迩</title> ?5 ????<style type="text/css"> ?6 ????????*{ ?7 ????????????margin: 0; ?8 ????????????padding: 0; ?9 ????????} 10 ????????div{ 11 ????????????width: 666px; 12 ????????????height: 666px; 13 ????????????border: 1px solid yellow; 14 ????????????margin: 0px auto; 15 ????????????box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.7); 16 ????????????position: relative; 17 ????????} 18 ????????li{ 19 ????????????width: 200px; 20 ????????????height: 200px; 21 ????????????list-style: none; 22 ????????????float: left; 23 ????????????margin: 10px; 24 ????????????border: 1px solid transparent; 25 ????????} 26 ????????li img{ 27 ????????????width: 200px; 28 ????????????height: 200px; 29 ????????????box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.7); 30 ????????} 31 ????</style> 32 </head> 33 <body> 34 ????<div> 35 ????????<ul> 36 ????????????<li><img src="1.jpg"></li> 37 ????????????<li><img src="2.jpg"></li> 38 ????????????<li><img src="3.jpg"></li> 39 ????????????<li><img src="4.jpg"></li> 40 ????????????<li><img src="5.jpg"></li> 41 ????????????<li><img src="6.png"></li> 42 ????????????<li><img src="7.jpg"></li> 43 ????????????<li><img src="8.jpg"></li> 44 ????????????<li><img src="9.jpg"></li> 45 ????????</ul> 46 ????</div> 47 </body> 48 <script src="move.js"></script> 49 <script type="text/javascript"> 50 ????var aLi = document.getElementsByTagName(‘li‘); 51 ?52 ????var arr = []; 53 ????var len = aLi.length; 54 ????for(var i=0; i<len; i++){ 55 ????????arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]); 56 ????} 57 ????for(var i=0; i<len; i++){ 58 ????????aLi[i].style.position = "absolute"; 59 ????????aLi[i].style.left = arr[i][0] + "px"; 60 ????????aLi[i].style.top = arr[i][1] + "px"; 61 ????????aLi[i].style.margin = 0; 62 ????} 63 ????for(var i =0; i<len; i++){ 64 ????????aLi[i].index = i; 65 ????????drag(aLi[i]); 66 ????} 67 ????var z ?=1; 68 ????function drag(obj){ 69 ????????obj.onmousedown = function(e){ 70 ????????????// var e || window.event; 71 ????????????var x1 = e.clientX, 72 ????????????????y1 = e.clientY; 73 ?????????????????74 ?75 ????????????var l ?= obj.offsetLeft, 76 ????????????????t ?= obj.offsetTop; 77 ????????????????obj.style.zIndex = z++; 78 ????????????document.onmousemove = function(e){ 79 ????????????????var e = e || window.event; 80 ????????????????var _left = e.clientX - x1 +l; 81 ????????????????var _top = e.clientY - y1 +t; 82 ?83 ????????????????obj.style.left = _left + "px"; 84 ????????????????obj.style.top = _top + "px"; 85 ?86 ????????????????var oLi = nearLi(obj); 87 ????????????????for(var k=0; k<len;k++){ 88 ????????????????????aLi[k].style.border = "1px solid transparent"; 89 ????????????????} 90 ????????????????if(oLi){ 91 ????????????????????oLi.style.border = "4px solid yellow"; 92 ????????????????} 93 ?94 ????????????} 95 ????????????document.onmouseup = function(){ 96 ????????????????document.onmousemove = null; 97 ????????????????document.onmouseup = null; 98 ????????????????var nL = nearLi(obj); 99 ????????????????var tmp = 0;100 ????????????????if(nL){101 ????????????????????nL.style.border = "1px solid transparent";102 ????????????????????startMove(nL,{left:arr[obj.index][0],top:arr[obj.index][1]});103 ????????????????????startMove(obj,{left:arr[nL.index][0],top:arr[nL.index][1]});104 ????????????????????tmp = obj.index;105 ????????????????????obj.index = nL.index;106 ????????????????????nL.index = tmp;107 ????????????????}else{108 ????????????????????startMove(obj,{left:arr[obj.index][0],top:arr[obj.index][1]});109 ????????????????}110 ????????????}111 ????????????return false;112 ????????}113 ????}114 ????function impact(obj1,obj2){115 ????????var T1 = obj1.offsetTop,116 ????????????L1 = obj1.offsetLeft,117 ????????????B1 = T1 + obj1.offsetHeight,118 ????????????R1 = L1 + obj1.offsetWidth;119 ????????var T2 = obj2.offsetTop,120 ????????????L2 = obj2.offsetLeft,121 ????????????B2 = T2 + obj2.offsetHeight,122 ????????????R2 = L2 + obj2.offsetWidth;123 ????????if(R1<L2 || B1<T2 || T1>B2 || L1>R2){124 ????????????return false125 ????????}else{126 ????????????return true;127 ????????}128 ????}129 ????function distance(obj1,obj2){130 ????????var a = obj1.offsetLeft - obj2.offsetLeft;131 ????????var b = obj1.offsetTop - obj2.offsetTop;132 ????????return Math.sqrt(a*a+b*b);133 ????}134 ????function nearLi(obj){135 ????????var n = 100000;136 ????????var oLi = "";137 ????????for(var j=0; j<len; j++){138 ????????????????????if(impact(obj,aLi[j]) && obj != aLi[j]){139 ????????????????????????var c = distance(obj,aLi[j]);140 ????????????????????????if(c<n){141 ????????????????????????????n = c;142 ????????????????????????????oLi = aLi[j];143 ????????????????????????}144 ????????????????????}145 ????????????????????146 ????????????????}147 ????????????????return oLi;148 ????}149 </script>150 </html>素材要求： 图片文件为9张正方形图片，否则容易让图片变形，图片格式任意。还需要导入move.js框架。
新手练习，多多包涵。
js照片墙拖拽特效
原文地址：https://www.cnblogs.com/a252336799/p/8505161.html