JS实现图片拖拽交换效果,供大家参考,具体内容如下
听网络前端javascript企业实战班公开的课,用JS实现了图片拖拽交换的目的,感谢老师的讲解。
<>强实现要点
<李>鼠标点击:获取鼠标在页面上可视区域的位置()和元素外边框距已定位父元素容器的位置();李
<李>鼠标移动:获取鼠标在页面上可视区域的位置(),并实时改变目标元素位置;进行碰撞检测,同时计算被碰撞元素与目标元素中心点距离,将距离最小的定位交换元素;李
<李>鼠标释放:进行元素交换
李
<强>注意点
<李>排除没有碰撞成功的情况,进行特殊讨论,李
<李>覆盖html5原有的图片拖拽功能,通过返回;李
<李>交换时同时勿忘记交换图片的索引;
李
<强>小技巧
<李>进行碰撞检测时,可以进行逆向思维,检测未碰撞的情况,即判断目标元素是否超过碰撞元素的边界(如:目标元素的右侧是否超过被碰撞元素的左侧)
<李>计算元素中心位置时,可以改为计算元素左上角之间的距离,从而转变为计算(offsetLeft1 offsetTop1) (offsetLeft1 offsetTop1)与(offsetLefti (offsetLefti, offsetTopi) offsetTopi)的距离,以简化计算,
李
<>强实现
HTML
& lt; div id=罢掌北?
& lt; ul>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt; li> & lt; img src=" alt="祝辞& lt;/li>
& lt;/ul>
& lt;/div>
CSS
* {
保证金:0;
填充:0;
}
身体{
用户选择:没有;/*阻止文本选中*/}
#{照片
宽度:600 px;
身高:600 px;
边界:2 px固体# 000;
保证金:20 px汽车;
}
李#照片ul {
list-style:没有;
宽度:180 px;
身高:180 px;
保证金:10 px;
浮:左;
}
#照片ul李:{徘徊
背景:# c0c;
}
李#照片ul img {
宽度:180 px;
身高:180 px;
边界:1 px固体# ccc;
}
JS
var=. getelementbyid照片(照片);
var oUl=photo.getElementsByTagName (“ul”) [0];
阿里var=oUl.getElementsByTagName(“李”);
var z=2;
var arr=[];
(var=0;我& lt;aLi.length;我+ +){
阿里arr.push([[我]。offsetLeft,阿里[我].offsetTop]);
}
(var=0;我& lt;aLi.length;我+ +){
阿里.style[我]。位置=熬浴?
阿里.style[我]。左=arr[我][0]+“px”;
阿里.style[我]。顶级=arr[我][1]+“px”;
阿里.style[我]。利润=0;
}
(var=0;我& lt;aLi.length;我+ +){
阿里[我]。指数=我;
阻力(aLi[我]);
}
函数阻力(obj) {
obj。onmousedown=function (ev) {
ev=ev | | window.ev;
var x=ev.clientX;
var y=ev.clientY;
var l=obj.offsetLeft;
var t=obj.offsetTop;
this.style。zIndex=z + +;
文档。onmousemove=function (ev) {
ev=ev | | window.ev;
var _left=电动汽车。clientX - x + l;
var _top=电动汽车。clientY - y + t;
obj.style。左=_left +“px”;
obj.style。顶级=_top +“px”;
李var=附近(obj);
(var=0;我& lt;aLi.length;我+ +){
阿里.style[我]。背景=" ";
}
如果(李){
li.style。背景=" # DF971F”;
}
}
文档。onmouseup=function () {
文档。onmousemove=零;
文档。onmousedown=零;
var nearLi=附近(obj);
var tmp=0;
如果(nearLi) {
移动(nearLi{左:加勒比海盗(obj。arr指数][0]:[obj.index] [1]});
移动(obj, {[nearLi左:加勒比海盗。arr指数][0]:[nearLi.index] [1]});
nearLi.style。背景=" ";
tmp=obj.index;
obj。指数=nearLi.index;
nearLi。指数=tmp;
其他}{
移动(obj,{左:加勒比海盗(obj。arr指数][0]:[obj.index] [1]});
}
}
返回错误;
}
}
函数的影响(其中obj1 methoda) {
var L1=obj1.offsetLeft;
var R1=其中obj1。offsetLeft + obj1.offsetWidth;
var T1=obj1.offsetTop;
var B1=其中obj1。offsetTop + obj1.offsetHeight;
var L2=obj2.offsetLeft;
var R2=methoda。offsetLeft + obj2.offsetWidth;
var T2=obj2.offsetTop;
var B2=methoda。offsetTop + obj2.offsetHeight;
如果(L2比;R1 | | T2祝辞B1 | | R2 & lt;L1 | | B2 & lt;T1) {
返回错误;
其他}{
返回true;
}
}
函数附近(obj) {
var tmp=5000;
奥利var=";
(var=0;我& lt;aLi.length;我+ +){
如果(影响(obj,阿里[我]),,阿里obj !=[我]){
var c=disCalc (obj,阿里[我]);
如果(tmp比;c) {
tmp=c;
奥利=阿里(我);
}
}
}
返回奥利;
}
函数disCalc(其中obj1 methoda) {
var x=其中obj1。offsetLeft - obj2.offsetLeft;
var y=其中obj1。offsetTop - obj2.offsetTop;
返回数学。√x * x + y * y);
}
