JavaScript實現九宮格拖拽效果
本文實例為大傢分享瞭JavaScript實現九宮格拖拽效果的具體代碼,供大傢參考,具體內容如下
關於一些拼圖遊戲什麼的,見人傢效果做的不錯,參考下別人寫的代碼,我也嘗試著做瞭個。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ margin: 0; padding: 0; } #wrap{ position: relative; } #wrap div{ position: absolute; width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; border-radius: 10px; } </style> </head> <body> <div id="wrap"></div> <script type="text/javascript"> //生成結構 var oWrap = document.getElementById("wrap"); var mt = ml = 10; for(var i = 0; i < 3; i++){ for(var j = 0; j < 3; j++){ var oDiv = document.createElement("div"); oWrap.appendChild(oDiv); oDiv.style.top = i*(oDiv.offsetHeight + mt) + "px"; oDiv.style.left = j*(oDiv.offsetWidth + ml) + "px"; oDiv.style.backgroundColor = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")" } } var arr = "ABCDEFGHI"; var aItems = oWrap.children; var len = aItems.length; for(var i = 0; i < aItems.length; i++){ aItems[i].innerHTML = arr[i]; } //拖拽及交換位置 for(var i = 0; i < aItems.length; i++){ aItems[i].onmousedown = function(e){ var evt = e || event; var x = evt.offsetX; var y = evt.offsetY; /*var x = evt.clientX - this.offsetLeft - oWrap.offsetLeft; var y = evt.clientY - this.offsetTop - oWrap.offsetTop;*/ var _this = this; var cloneNode = this.cloneNode(); cloneNode.style.border = '1px dashed #cecece'; this.style.zIndex = 1; oWrap.replaceChild(cloneNode,this); oWrap.appendChild(this); document.onmousemove = function(e){ var evt = e || event; var _left = evt.clientX - x - oWrap.offsetLeft; var _top = evt.clientY - y - oWrap.offsetTop; _this.style.left = _left + "px"; _this.style.top = _top + "px"; return false; } document.onmouseup = function(){ //交換位置 var disArr = []; var newArr = []; console.log(aItems.length); for(var i = 0; i < len; i++){ var disX = _this.offsetLeft - aItems[i].offsetLeft; var disY = _this.offsetTop - aItems[i].offsetTop; var dis = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2)); disArr.push(dis); newArr.push(dis); } disArr.sort(function(a,b){ return a-b; }) var minIndex = newArr.indexOf(disArr[0]); _this.style.left = aItems[minIndex].style.left; _this.style.top = aItems[minIndex].style.top; aItems[minIndex].style.left = cloneNode.style.left; aItems[minIndex].style.top = cloneNode.style.top; oWrap.removeChild(cloneNode); document.onmousemove = null; document.onmouseup = null; } } } /*var arr = [45,32,11,90]; var minVal = Math.min.apply(null,arr); var minIndex = arr.indexOf(minVal); console.log(minVal,arr,minIndex);*/ </script> </body> </html>
這是效果圖
雖說實現瞭效果,但我寫的還是不太嚴謹,還有諸多bug,比如上邊做邊沒距離,實際寫的話還要加上這個距離,即使距離為0,還有就是我發現拖拽的時候,如果使用qq截圖的話,克隆的那個小方塊沒辦法消失,隻得重新刷新頁面,有沒有大佬解決下。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。