溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“原生JS怎么生成九宮格”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
涉及知識點，請
1、熟練利用js做出html樣式
2、對onmousedown,onmousemove,onmouseup等事件熟練組合運用
3、熟練掌握事件對象domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth，domobj.offsetHeight的知識點
4、了解事件 e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY的知識點
5、理解克隆節點的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
}
#wrap div {
width: 100px;
height: 100px;
position: absolute;
text-align: center;
line-height: 100px;
font-size: 50px;
}
</style>
</head>
<body>
<div id="wrap">
</div>
<script>
// 1.獲取warp
var wrap = document.querySelector('#wrap')
//2.創建3行3列9個div。并且給每個div添加隨機顏色
//以下為表示構建思路，利用雙重for循環
//(0,0) (110,0) (220,0)
//(0,110)(110,110)(220,110)
//(0,220)(110,220)(220,220)
var count = 0
var chart = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for (var i = 0; i < 3; i++) {//行
for (var j = 0; j < 3; j++) {//列
var odiv = document.createElement('div');
wrap.appendChild(odiv);
//設置top和left值，注意行對應的是odiv.offsetHeight，列對應的是odiv.offsetWidth
odiv.style.top = i * (odiv.offsetHeight + 10) + 'px';
odiv.style.left = j * (odiv.offsetWidth + 10) + 'px';
//獲取隨機顏色，用的rgb隨機獲取方式
odiv.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256)
+ ','+ Math.floor(Math.random() * 256) + ')';
//給每個圖片標上號碼，i,j最大值為3，但是共執行了9次，設置變量count=0,count++作為數組的索引把對應的內容添加到div上
odiv.innerText = chart[count++];
}
}
//3.獲取循環中創建的9個div,并添加點擊鼠標事件
var items = wrap.children
for (var i = 0; i < items.length; i++) {
items[i].onmousedown = function (e) {
var evt = e || event;
//獲取鼠標點下相對于事件源的偏移量
var x = evt.offsetX;
var y = evt.offsetY;
//this指向鼠標點擊要拖拽的對象
var dragitem = this;
//克隆點擊拖拽的對象。注意此時解釋可能有點抽象，但是解題關鍵，克隆對象后相當于除了上述9個事件，
//又生成了一個隱藏的和點擊的div相同的對象，把克隆的對象替換掉剛點擊時的即將拖拽的對象，此時拖
//拽對象被隱藏，脫離父元素，此時需要把拖拽的對象添加到父元素的最后，使其重新為10個子元素，否則拖拽的元素無法顯示。
var clonenode = dragitem.cloneNode();
wrap.replaceChild(clonenode, dragitem);
//把拖拽的節點放到wrap的最后
wrap.appendChild(dragitem);
//拖拽時把拖拽的層次向上調一下，否則會被覆蓋。
dragitem.style.zIndex = 1;
//4，此時鼠標點擊時需要準備的工作已經做完了，因為拖拽鼠標時，拖拽對象時再文檔上移動的，此時鼠標移動的對象應為document
document.onmousemove = function (e) {
var evt = e || event;
//獲取拖拽對象跟隨鼠標時在文檔中的定位，事件源據文檔的邊距-點擊時距離事件源的偏移=定位的坐標
var x1 = evt.clientX - x;
var y1 = evt.clientY - y;
dragitem.style.left = x1 + 'px';
dragitem.style.top = y1 + 'px';
//取消默認行為
return false;v
}
//5，有拖拽對象的定位，此時需要判斷鼠標松開時距離哪個創建的哪個div距離最近，交換其距離。上面提到，此時共創建了10個Div,
//分別求出拖拽對象和其他10個div的距離傳到數組中，找出最小值對應的索引，該索引對應的div即為距離最近的div,然后交換兩者的
//位置（注意：觀察數組，最后一個為0，且上面已經把拖拽對象放到最后，是自己和自己比，因此循環時減一即可忽略和自己的比較）
document.onmouseup = function () {
var arr = [];
//循環長度-1，忽略和自己的比較
for (var j = 0; j < items.length - 1; j++) {
//利用勾股定理求距離，并傳入數組
var disx = dragitem.offsetLeft - items[j].offsetLeft;
var disy = dragitem.offsetTop - items[j].offsetTop;
var dissum = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2))
arr.push(dissum);
}
//利用展開符...展開數組，用Math.min找出最小值，再用最小值去找出數組對應索引
var min = Math.min(...arr);
var dex = arr.indexOf(min);
//把拖拽對象的定位換成距離最近div的距離
dragitem.style.left = items[dex].style.left;
dragitem.style.top = items[dex].style.top;
//然后把距離最近的div的定位換成此時克隆對象的定位（即原拖拽對象的定位）
items[dex].style.left = clonenode.style.left;
items[dex].style.top = clonenode.style.top;
//此時交換完畢，把克隆節點移除
wrap.removeChild(clonenode)
//移除事件并取消默認行為
document.onmousemove = '';
document.onmouseup = '';
return false;
}
}
}
</script>
</body>
</html>“原生JS怎么生成九宮格”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
