jquery可任意拖动排序的导航图片效果

这是一款使用jquery来制作的可任意拖动排序的导航图片效果。在这个导航图片效果中，用户可以按自己的喜好来随意拖动导航图片进行排列，非常实用。

使用方法

在页面中引入jquery文件。

<script src="path/to/jquery.min.js" type="text/javascript"></script>
                

HTML结构

该导航图片效果的HTML结构如下：

<div class="item_container">
  <div class="item_content">
    <ul>
      <li>
        <div class="item">
          <img src="images/youku.png" />
        </div>
      </li>
      <li>
        <div class="item">
          <img src="images/jd.png" />
        </div>
      </li>
      <li>
        <div class="item">
          <img src="images/taobao.png" />
        </div>
      </li>
      ......
    </ul>
  </div>
</div>
                

CSS样式

为该导航图片特效添加下面的CSS样式。

.item_content ul  {
  list-style:none;
}
.item_content ul li {
  width:200px;
  height:120px;
  float:left;
  margin:10px
}
.item_content {
  width:740px;
  height:460px;
  margin:0 auto;
}
.item_content .item {
  width:200px;
  height:120px;
  line-height:120px;
  text-align:center;
  cursor:pointer;
  background:#ccc;
}
.item_content .item img {
  width:200px;
  height:120px;
  border-radius:6px;
}                  
                

JavaScript

导航图片的拖动和位置交互完全有Jquery代码来实现，完整的代码如下：

$(function() {
  function Pointer(x, y) {
    this.x = x ;
    this.y = y ;
  }
  function Position(left, top) {
    this.left = left ;
    this.top = top ;
  }
  $(".item_content .item").each(function(i) {
    this.init = function() { // 初始化
      this.box = $(this).parent() ;
      $(this).attr("index", i).css({
        position : "absolute",
        left : this.box.offset().left,
        top : this.box.offset().top
      }).appendTo(".item_content") ;
      this.drag() ;
    },
    this.move = function(callback) {  // 移动
      $(this).stop(true).animate({
        left : this.box.offset().left,
        top : this.box.offset().top
      }, 500, function() {
        if(callback) {
          callback.call(this) ;
        }
      }) ;
    },
    this.collisionCheck = function() {
      var currentItem = this ;
      var direction = null ;
      $(this).siblings(".item").each(function() {
        if(
          currentItem.pointer.x > this.box.offset().left &&
          currentItem.pointer.y > this.box.offset().top &&
          (currentItem.pointer.x  this.box.offset().top) {
            direction = "up" ;
          } else {
            direction = "normal" ;
          }
          this.swap(currentItem, direction) ;
        }
      }) ;
    },
    this.swap = function(currentItem, direction) { // 交换位置
      if(this.moveing) return false ;
      var directions = {
        normal : function() {
          var saveBox = this.box ;
          this.box = currentItem.box ;
          currentItem.box = saveBox ;
          this.move() ;
          $(this).attr("index", this.box.index()) ;
          $(currentItem).attr("index", currentItem.box.index()) ;
        },
        down : function() {
          // 移到上方
          var box = this.box ;
          var node = this ;
          var startIndex = currentItem.box.index() ;
          var endIndex = node.box.index(); ;
          for(var i = endIndex; i > startIndex ; i--) {
            var prevNode = $(".item_content .item[index="+ (i - 1) +"]")[0] ;
            node.box = prevNode.box ;
            $(node).attr("index", node.box.index()) ;
            node.move() ;
            node = prevNode ;
          }
          currentItem.box = box ;
          $(currentItem).attr("index", box.index()) ;
        },
        up : function() {
          // 移到上方
          var box = this.box ;
          var node = this ;
          var startIndex = node.box.index() ;
          var endIndex = currentItem.box.index(); ;
          for(var i = startIndex; i