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 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();
    });
}

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