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

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

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

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

關于一些拼圖游戲什么的，見人家效果做的不錯，參考下別人寫的代碼，我也嘗試著做了個。

<!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>

這是效果圖