原生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;
//布局轉(zhuǎn)換
//獲取當前布局圖片的位置
for (i = 0; i < aLi.length; i++) {
aPos[i] = { left: aLi[i].offsetLeft, top: aLi[i].offsetTop };
}
//布局轉(zhuǎn)換必須要兩個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';
//轉(zhuǎn)換定位
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)
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Html+CSS+JS輪播圖實現(xiàn)源碼(手動輪播,自動輪播)
今天做網(wǎng)站的時候需要用上JS輪播圖代碼,而且還要求是原生的JS代碼,下面這篇文章主要給大家介紹了關(guān)于Html+CSS+JS輪播圖實現(xiàn)的相關(guān)資料,文中介紹的方法包括手動輪播和自動輪播,需要的朋友可以參考下2023-06-06
據(jù)說，對于網(wǎng)頁開發(fā)人員來說，F(xiàn)irebug是Firefox瀏覽器中最好的插件之一。2010-08-08
這篇文章主要介紹了js中關(guān)于Blob對象的介紹與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
如何讓復選框只能選擇一項，實現(xiàn)的方法有很多，在本文為大家詳細介紹下，有此需求的朋友可以參考下2013-10-10
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
使用pdf-lib.js實現(xiàn)pdf添加自定義水印功能
pdf-lib是一個強大的JavaScript庫,允許在任何JavaScript環(huán)境中創(chuàng)建和修改PDF文檔,下面就跟隨小編一起來學習一下如何使用pdf-lib實現(xiàn)pdf添加自定義水印功能吧2024-11-11
這篇文章主要為大家分享了Bootstrap作品展示站點實戰(zhàn)項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Javascript加速運動與減速運動代碼分享,需要的朋友可以參考下2014-12-12
通過JS動態(tài)創(chuàng)建一個html DOM元素并顯示
需要通過點擊某個元素后， 動態(tài)創(chuàng)建一個DOM元素并顯示，因此寫了一些相關(guān)的js函數(shù)，在此記錄下2014-10-10
這篇文章主要介紹了微信小程序頁面渲染實現(xiàn)方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11