JavaScript實(shí)現(xiàn)九宮格拖拽效果

更新時(shí)間：2022年06月28日 16:06:33 作者：zy_.

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)九宮格拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下

關(guān)于一些拼圖游戲什么的，見(jiàn)人家效果做的不錯(cuò)，參考下別人寫(xiě)的代碼，我也嘗試著做了個(gè)。

<!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">
?? ??? ??? ?//生成結(jié)構(gòu)
?? ??? ??? ?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>

這是效果圖

雖說(shuō)實(shí)現(xiàn)了效果，但我寫(xiě)的還是不太嚴(yán)謹(jǐn)，還有諸多bug，比如上邊做邊沒(méi)距離，實(shí)際寫(xiě)的話還要加上這個(gè)距離，即使距離為0，還有就是我發(fā)現(xiàn)拖拽的時(shí)候，如果使用qq截圖的話，克隆的那個(gè)小方塊沒(méi)辦法消失，只得重新刷新頁(yè)面，有沒(méi)有大佬解決下。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: