微客导航 » 文章资讯 » JS实现图片拖拽交换效果

JS实现图片拖拽交换效果

2023-09-05 02:36:04 294

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;
}

varphoto=document.getElementById("photo");
varoUl=photo.getElementsByTagName("ul")[0];
varaLi=oUl.getElementsByTagName("li");
varz=2;

vararr=[];
for(vari=0;iR1||T2>B1||R2c){
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];
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JS实现图片拖拽交换效果

热门推荐

随机推荐