拖拽图片小项目

Posted 2020-10-10 张若昀的小迷妹

1.布局

一个ul里面放几个li，li里面放图片，li要设置成absolute。

2.获取数据

获取每个li距浏览器顶部和左部距离并放入aPos数组中。

给每个li添加一个自定义属性index，li在ul中的位置。

3.拖拽事件

当鼠标移动到某元素上时，将cursor改成可移动。

当鼠标按下时，获取滚动条距浏览器顶部和左部的距离，然后计算鼠标与拖拽对象的距离。

当鼠标移动时，li随鼠标移动，找到距当前li最近的li，并去掉其他li的class，为最近的li添加高亮，

　　如何找到最近的li？

　　将此li与每个li比较，检查是否碰撞。如果碰撞了，获取两者的距离，然后如果比当前的最小距离小，就将最小距离设置为此距离。

当鼠标按键松开时，清空mousemove和mouseup事件，找到最近的li，将2个li交换位置(换为li本来的位置)，交换index。如果没有找到最近的li，就将此li的位置设置为移动前的位置。

部分代码：

交换index

oNear.index += obj.index;
obj.index = oNear.index - obj.index;
oNear.index = oNear.index - obj.index;

检测2个li有没有碰撞到

function colTest(obj1,obj2){
var t1 = obj1.offsetTop;//元素距顶部距离
var r1 = obj1.offsetWidth+obj1.offsetLeft;//offsetWidth元素宽度，包括不可见部分
var b1 = obj1.offsetHeight+obj1.offsetTop;
var l1 = obj1.offsetLeft;

var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth+obj2.offsetLeft;
var b2 = obj2.offsetHeight+obj2.offsetTop;
var l2 = obj2.offsetLeft;

if(t1>b2||r1<l2||b1<t2||l1>r2){//检查2个图片有没有碰到
return false;
}else{
return true;
}
}

勾股定理求2个li的距离

function getDis(obj1,obj2){
var a = obj1.offsetLeft-obj2.offsetLeft;
var b = obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
}