JQuery实现移动9宫格图片自由切换移动

这篇文章主要介绍了通过JQuery实现移动9宫格的前端页面特效，用户可以自由选择1张图片，并移动此图片，松开鼠标后，会自动交换2张图片的位置。

实现方法：html和css在页面上静态地实现9宫格，用9张图片填充这9个格子，然后使用jquery动态实现图片自由切换移动。

实现思路：当鼠标点击其中任意一张图片时，我们利用jquery克隆此包含了此图片的div块并隐藏它。然后在鼠标移动事件中监听鼠标停止事件，当鼠标事件被触发后，根据此时的坐标位置判断鼠标停留在哪个div，获取要互相转换的2张图片

1.html，css 实现静态9宫格

html，css在页面中将9张图片按3x3的规格平铺的相信大家都能实现，这里我就不做过多说明了。但是需要说明一点，每张图片的宽度和高度必须一致且固定，因为我们在实现动态移动时需要知道每张图片的坐标位置，以此来实现移动效果。

html结构：

<div class="wrap">
<div class="item"><img src="image/move_img/1.jpg"></div>
<div class="item"><img src="image/move_img/2.jpg"></div>
<div class="item"><img src="image/move_img/3.jpg"></div>
<div class="item"><img src="image/move_img/4.jpg"></div>
<div class="item"><img src="image/move_img/5.jpg"></div>
<div class="item"><img
4000
src="image/move_img/6.jpg"></div>
<div class="item"><img src="image/move_img/7.jpg"></div>
<div class="item"><img src="image/move_img/8.jpg"></div>
<div class="item"><img src="image/move_img/9.jpg"></div>
</div>

主要的css样式：

.wrap{
margin: 20px auto 0;
width: 490px;
height: 580px;
border: 1px solid #000;
position: relative;
}

.wrap .item{
width: 150px;
height: 180px;
float: left;
margin: 5px;
border-radius: 5px;
background: #ff3355;
border: 1px solid lightgray;
text-align: center;
cursor: move;  //鼠标移入时显示十字架样式
}

.wrap .item img{
width: 150px;
height: 180px;
}

.moving{
border: 1px dashed gray;
background: white;
}

点击图片时克隆此div的样式：

.wrap div.active{
width: 150px;
height: 180px;
position: absolute;
background: goldenrod;
box-shadow: 0 0 2px 2px #555;
border-radius: 5px;
z-index: 10;
}

js代码

1.监听鼠标点击事件，当鼠标点击其中一张图片时，获取此div并克隆它。

克隆div部分代码：

var disX=e.offsetX;
var disY=e.offsetY;
var oClone=$(this).clone();  //克隆选中的div
oClone.addClass('active').css({
left:$(this).position().left,
top:$(this).position().top
});
$('.wrap').append(oClone);  //追加到wrap中
$(this).addClass('moving').html(''); //使克隆的div消失

2.再鼠标点击事件触发，成功克隆出被选中的div块，并隐藏添加在最外层wrap层后；监听鼠标移动事件，当鼠标移动事件触发时，设置被克隆出的div的坐标位置与选中的div一致，隐藏选中的div块。

$('.wrap').on('mousemove',function(e){
oClone.css({
left: e.pageX - $(this).offset().left - disX,
top: e.pageY - $(this).offset().top - disY
})
});

3.监听鼠标松开事件。当鼠标松开事件被触发时移除鼠标移动事件，再计算移动的div与其余每一个div块之间的距离（包括被克隆的div块），通过勾股定理算出9个距离，得到最小值，然后获取最小值对应得div索引值。如果该索引值对应的是克隆的div，说明不与其他div块交换位置，只要移除克隆的div块，并恢复被克隆的div块。否则，我们需要再克隆一个被交换位置的div块，然后同样地设置它的坐标位置，将两个克隆出的块元素交换位置。

利用勾股定理计算距离：

var minIndex = $(that).index(); //最小索引初始值
var minValue = 1000; //初始化最小值，用来存储盒子的最小值
$('.wrap div').not(':last').each(function(){
var distance = Math.sqrt(Math.pow(oClone.position().left - $(this).position().left,2) + Math.pow(oClone.position().top - $(this).position().top,2));
if ( distance < minValue) {
minValue = distance; //获取最小值
minIndex = $(this).index(); //获取最小值对应得索引
}
});

判断索引值，根据不同的索引值进行不同的操作：

if (minIndex == $(that).index()) {
oClone.animate($(that).position(),400,function(){
$(that).removeClass('moving').html(oClone.html()); //恢复被克隆盒子相关样式
$(this).remove();  //移除被克隆的盒子
})
}else{
var minBox = $('.wrap div').eq(minIndex);
var oClone2 = minBox.clone();
oClone2.addClass('active').css({
left:minBox.position().left,
top:minBox.position().top
})
$('.wrap').append(oClone2);
minBox.addClass('.moving').html('');
oClone.animate(minBox.position(),400,function(){
minBox.removeClass('moving').html(oClone.html());
oClone.remove();
})
oClone2.animate($(that).position(),400,function(){
$(that).removeClass('moving').html(oClone2.html());
oClone2.remove();
});
}

到这里，我们已经完成了所有的功能代码的编写，快动手试试吧。