本文实例为大家分享了一个用原生JS实现的可拖拽照片墙，效果如下：
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽照片墙，实现照片互换位置</title>
<style>
* {
margin: 0;
padding: 0;
}
#ul1 {
width: 660px;
position: relative;
margin: 10px auto;
}
#ul1 li {
width: 200px;
height: 150px;
float: left;
list-style: none;
margin: 10px;
z-index: 1;
}
#ul1 .active {
border: 1px dashed red;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload = function () {
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var aPos = [];
var iMinZindex = 2;
var i = 0;
//布局转换
//获取当前布局图片的位置
for (i = 0; i < aLi.length; i++) {
aPos[i] = { left: aLi[i].offsetLeft, top: aLi[i].offsetTop };
}
//布局转换必须要两个for循环才能完成
for (i = 0; i < aLi.length; i++) {
//为每个图片位置赋值
aLi[i].style.left = aPos[i].left + 'px';
aLi[i].style.top = aPos[i].top + 'px';
//转换定位
aLi[i].style.position = 'absolute';
//offset的值经已经包括的margin值，所以要取消
aLi[i].style.margin = '0';
aLi[i].index = i;
}
//循环拖拽
for (i = 0; i < aLi.length; i++) {
setDrag(aLi[i]);
}
function setDrag(obj) {
//当鼠标按下时
obj.onmousedown = function (ev) {
//事件兼容
var oEvent = ev || event;
//将当前图片的堆叠顺序增加
obj.style.zIndex = iMinZindex++;
//计算鼠标相对于拖拽对象左上角的位置
var disX = oEvent.clientX - obj.offsetLeft;
var disY = oEvent.clientY - obj.offsetTop;
//当鼠标移动时
document.onmousemove = function (ev) {
//事件兼容
var oEvent = ev || event;
//重新为图片位置赋值
obj.style.left = oEvent.clientX - disX + 'px';
obj.style.top = oEvent.clientY - disY + 'px';
//清空所有li的样式
for (i = 0; i < aLi.length; i++) {
aLi[i].className = '';
}
//获取当前拖拽对象的最近目标对象
var oNear = findNearest(obj);
//如果存在
if (oNear) {
//将该对象的class赋于active
oNear.className = 'active';
}
};
//当鼠标松开时
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
//获取当前拖拽对象的最近目标对象
var oNear = findNearest(obj);
//如果有最近的碰撞对象
if (oNear) {
oNear.className = '';
//将最近目标对象的zIndex加加
//防止从背面移动
oNear.style.zIndex = iMinZindex++;
//当前拖拽对象移到目标对象之上时位于目标对象之上
obj.style.zIndex = iMinZindex++;
//将最近目标对象(oNear)移到当前对象(obj)位置
startMove(oNear, aPos[obj.index]);
//将当前对象(obj)移到最近目标对象(oNear)位置
startMove(obj, aPos[oNear.index]);
//交换当前拖拽对象与目标对象的index值
var tmp = 0;
tmp = obj.index;
obj.index = oNear.index;
oNear.index = tmp;
//如果没有最近的碰撞对象
} else {
//回到原位
startMove(obj, aPos[obj.index]);
}
};
//清除定时器
//防止图片在移位过程中再次拖动出现抖动
clearInterval(obj.timer);
//防止浏览器bug，拖拽时鼠标指针变形
return false;
};
}
//碰撞检测
function cdTest(obj1, obj2) {
//目标1的左右上下轮廓位置
var l1 = obj1.offsetLeft;
var r1 = obj1.offsetLeft + obj1.offsetWidth;
var t1 = obj1.offsetTop;
var b1 = obj1.offsetTop + obj1.offsetHeight;
//目标2的左右上下轮廓位置
var l2 = obj2.offsetLeft;
var r2 = obj2.offsetLeft + obj2.offsetWidth;
var t2 = obj2.offsetTop;
var b2 = obj2.offsetTop + obj2.offsetHeight;
//对两个目标的外轮廓线进行对比,以检测是否碰撞到了
if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
return false;
} else {
return true;
}
}
//计算拖拽对象和其它对象的连线距离
function getDis(obj1, obj2) {
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(a * a + b * b);
}
//找到碰上的，并且最近的
function findNearest(obj) {
//为找出最小值做的参照数值
var iMin = 999999999;
var iMinIndex = -1;
for (i = 0; i < aLi.length; i++) {
//避免自身与自身相碰撞,跳过检测
if (obj == aLi[i]) {
continue
};
//如果找到碰撞对象
if (cdTest(obj, aLi[i])) {
//计算拖拽对象与每个li的距离
var dis = getDis(obj, aLi[i]);
//如果当前参照距离大于某一个li与当前拖拽对象的距离
if (iMin > dis) {
//重新赋值参照距离(多次比对，得出最小值)
iMin = dis;
//得出最近目标的下标
iMinIndex = i;
}
}
}
//iMinIndex为-1，代表始终没有碰到
if (iMinIndex == -1) {
return null;
//否则
} else {
//返回碰撞最近的那个li
return aLi[iMinIndex];
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li><img src="images/0.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/0.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
</body>
</html>
以下是上面代码中引入的move.js文件，主要用于实现运动效果，代码如下：
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var bStop = true;
for (var attr in json) {
var iCur = 0;
if (attr == 'opacity') {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (json[attr] - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != json[attr]) {
bStop = 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 (bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- JavaScript实现图片的放大缩小及拖拽功能示例
- 原生JS实现拖拽图片效果
- js实现使用鼠标拖拽切换图片的方法
- JS HTML5拖拽上传图片预览
- js实现拖拽上传图片功能
- js实现图片放大和拖拽特效代码分享
- JS实现简易的图片拖拽排序实例代码
- js css3实现图片拖拽效果
- javascript 网页编辑框及拖拽图片的问题
- JavaScript实现文字与图片拖拽效果的方法
本文由 华域联盟 原创撰写：华域联盟 » 原生JS实现拖拽照片墙
转载请保留出处和原文链接：https://www.cnhackhy.com/83190.htm
