原生JS實現(xiàn)拖拽照片墻
更新時間：2021年10月13日 11:02:08 作者：aiguangyuan
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)拖拽照片墻，實現(xiàn)照片互換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了一個用原生JS實現(xiàn)的可拖拽照片墻，效果如下：
實現(xiàn)代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現(xiàn)拖拽照片墻，實現(xiàn)照片互換位置</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循環(huán)才能完成
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的值經(jīng)已經(jīng)包括的margin值，所以要取消
aLi[i].style.margin = '0';
aLi[i].index = i;
}
//循環(huán)拖拽
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';
//清空所有l(wèi)i的樣式
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]);
}
};
//清除定時器
//防止圖片在移位過程中再次拖動出現(xiàn)抖動
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) {
//為找出最小值做的參照數(shù)值
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文件，主要用于實現(xiàn)運動效果，代碼如下：
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)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JS實現(xiàn)新聞滾動效果：滾動頻率由setTimeout(F,#%18?10:3000)這個3000來控制,感興趣的朋友可以了解下哦2013-01-01
這篇文章主要給大家介紹了關于JavaScript前后端JSON使用方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要給大家介紹了關于js中復選框的取值及賦值的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要為大家詳細介紹了微信小程序使用二次貝塞爾曲線畫波浪，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了JavaScript Window窗口對象屬性和使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要給大家介紹了關于JS時間戳與日期格式互相轉換的簡單方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
今天小編就為大家分享一篇關于使用javascript做時間倒數(shù)讀秒功能的實例，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要分享一個自己寫的簡單的javascript分頁組件，效果十分不錯，代碼也很詳盡，這里推薦給小伙伴們。2015-02-02
javascript設計模式 – 原型模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 原型模式,結合實例形式分析了javascript原型模式相關概念、原理、應用場景及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了通過jQuery學習js類型判斷的技巧，下面和小編一起來學習一下吧2019-05-05