一.效果展示：
JavaScript九宮格拖拽換位
二.案例分析：
- 9宮格排列，行列結構，
- 當頁面重繪時，9個格子，每個格子的背景顏色會隨機發生變化
- 任意點擊按下某個格子時，滑鼠移動，格子會隨之移動，并在原來的位置也有相同的格子出現（補上空缺的位置）
- 當滑鼠釋放時，距離觸發的格子最近的一個格子，會與它發生位置交換，
- 創建一個空的div,作為父級元素，設定好樣式，
- 通過觀察我們會發現，9宮格是3行3列的排列方式，（類似于表格形式）并且每一行的top值是一樣的，每一列的left值是一樣的，所以可以使用到for回圈，回圈嵌套，他們之間在加上10px間距，會看起來更分明，offsetWidth(當前物件的寬度)offsetHeight(當前物件的高度)
- 定義一個字串，把字串里每個子串（字母）通過for添加進每個格子里（oDiv）
- 隨機的背景顏色，用rdb來表示，在這里要用到亂數Math.random(),向下取整Math.floor(),來獲取，（可以不用另加for，直接放在嵌套回圈中）
到這里，1,2就完成了，
- 當滑鼠按下時，獲取當前物件也就是事件源距左邊、上邊的距離；當滑鼠移動時獲取當前滑鼠位置與可視區域X,Y的值，
- 用滑鼠移動時的值減去事件源（距離）X,Y；分別求出,在賦值給操作格子的style,left,top;
- 注意因為在這里oBox，margin-left，top值我設定了50px,不是最左端，最上邊所以要減去，
- 當滑鼠按下被拖動時，此時原先的位置是空白的，需要補上所以：cloneNode = dragItem.cloneNode()將當前的操作的節點復制一份，同時插入oBox中，在為cloneNode加上1像素虛線邊框，顯得有虛化選中的效果，（會出現層疊問題，z-index設定為1；）
- 當滑鼠釋放時，當前物件會與最近的物件交換位置需要求出距離哪個目標更近
想要求出兩個物件中心點之間的距離
分別要求出它們各自中心點對于父元素offsetx，offsety的距離加上自身的寬度，高度的一半，它們差值就是我們想要的，因為它們的寬度高度都是一樣的，所以自身的一半可以不用算進去
接下來利用勾股定理求出斜邊的長，兩點之間的距離
將距離每個，目標的值通過for回圈求出來，放進一個陣列里面，用排序取到最小的值，這個時候新的問題出現了，無論你是距離哪個位置上，經過排序的之后各自原位置上的索引值都會發生改變，而原本我們是想找到哪個位置距離最新，從而跟他當前所在的位置相關，這個時候，最小距離的索引值永遠代表著第一位，
我們需要再次將元素組的值再取一次，
var minIndex = minVal.indexOf(aIndex); //最短距離在原陣列中的索引位置
dragItem.style.left = aItems[minIndex].style.left;//相互交換位置
dragItem.style.top = aItems[minIndex].style.top;//相互交換位置
當我們交換位置時是并沒有發生變化的，因為它與自身進行對比并且距離始終為0
所以我們要替換當前的節點
oBox.replaceChild(cloneNode, dragItem);//替換節點
oBox.appendChild(dragItem);把當前的節點放到最后
接下來：把克隆的節點定位給距離最小的
aItems[minIndex].style.left = cloneNode.style.left;
aItems[minIndex].style.top = cloneNode.style.top;
oBox.removeChild(cloneNode);這個時候克隆節點就不用著了，刪掉以免出現層疊，
最后也不要忘記把移動事件給清掉，
document.onmousemove = null; //移動事件清掉
document.onmouseup = null;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293746.html
標籤：其他