JS实现图片拖拽交换效果
JS实现图片拖拽交换效果,供大家参考,具体内容如下
听WEB前端javascript企业实战班公开课,用JS实现了图片拖拽交换的目的;感谢老师的讲解。
实现要点
- 鼠标点击onmousedown:获取鼠标在页面上可视区域的位置(clientX,clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop);
- 鼠标移动onmousemove:获取鼠标在页面上可视区域的位置(clientX,clientY),并实时改变目标元素位置;进行碰撞检测,同时计算被碰撞元素与目标元素中心点距离,将距离最小的定位交换元素;
- 鼠标释放onmouseup:进行元素交换
注意点
- 排除没有碰撞成功的情况,进行特殊讨论;
- 覆盖html5原有的图片拖拽功能,通过returnfalse返回;
- 交换时同时勿忘记交换图片的索引;
小技巧
- 进行碰撞检测时,可以进行逆向思维,检测未碰撞的情况,即判断目标元素是否超过碰撞元素的边界(如:目标元素的右侧是否超过被碰撞元素的左侧)
- 计算元素中心位置时,可以改为计算元素左上角之间的距离,从而转变为计算(offsetLeft1,offsetTop1)(offsetLeft1,offsetTop1)与(offsetLefti(offsetLefti,offsetTopi)offsetTopi)的距离,以简化计算;
实现
HTML
CSS
*{ margin:0; padding:0; } body{ user-select:none;/*阻止文本选中*/ } #photo{ width:600px; height:600px; border:2pxsolid#000; margin:20pxauto; } #photoulli{ list-style:none; width:180px; height:180px; margin:10px; float:left; } #photoulli:hover{ background:#c0c; } #photoulliimg{ width:180px; height:180px; border:1pxsolid#ccc; }
JS
varphoto=document.getElementById("photo"); varoUl=photo.getElementsByTagName("ul")[0]; varaLi=oUl.getElementsByTagName("li"); varz=2; vararr=[]; for(vari=0;iR1||T2>B1||R2 c){ tmp=c; oLi=aLi[i]; } } } returnoLi; } functiondisCalc(obj1,obj2){ varx=obj1.offsetLeft-obj2.offsetLeft; vary=obj1.offsetTop-obj2.offsetTop; returnMath.sqrt(x*x+y*y); }
move.js
functionmove(obj,json,endFn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ varbBtn=true; for(varattrinjson){ variCur=0; if(attr=='opacity'){ if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){ iCur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ iCur=Math.round(parseFloat(getStyle(obj,attr))*100)||100; } }else{ iCur=parseInt(getStyle(obj,attr))||0; } variSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur!=json[attr]){ bBtn=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(bBtn){ clearInterval(obj.timer); if(endFn){ endFn.call(obj); } } },30); } functiongetStyle(obj,attr){ if(obj.currentStyle){ returnobj.currentStyle[attr]; }else{ returngetComputedStyle(obj,false)[attr]; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。