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().left + this.box.width()) &&
          (currentItem.pointer.y < this.box.offset().top + this.box.height())
        ) {
          // 返回对象和方向
          if(currentItem.box.offset().top < this.box.offset().top) {
            direction = "down" ;
          } else if(currentItem.box.offset().top > 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 < endIndex; i++) {
            var nextNode = $(".item_content .item[index="+ (i + 1) +"]")[0] ;
            node.box = nextNode.box ;
            $(node).attr("index", node.box.index()) ;
            node.move() ;
            node = nextNode ;
          }
          currentItem.box = box ;
          $(currentItem).attr("index", box.index()) ;
        }
      }
      directions[direction].call(this) ;
    },
    this.drag = function() { // 拖拽
      var oldPosition = new Position() ;
      var oldPointer = new Pointer() ;
      var isDrag = false ;
      var currentItem = null ;
      $(this).mousedown(function(e) {
        e.preventDefault() ;
        oldPosition.left = $(this).position().left ;
        oldPosition.top =  $(this).position().top ;
        oldPointer.x = e.clientX ;
        oldPointer.y = e.clientY ;
        isDrag = true ;
        
        currentItem = this ;
        
      }) ;
      $(document).mousemove(function(e) {
        var currentPointer = new Pointer(e.clientX, e.clientY) ;
        if(!isDrag) return false ;
        $(currentItem).css({
          "opacity" : "0.8",
          "z-index" : 999
        }) ;
        var left = currentPointer.x - oldPointer.x + oldPosition.left ;
        var top = currentPointer.y - oldPointer.y + oldPosition.top ;
        $(currentItem).css({
          left : left,
          top : top
        }) ;
        currentItem.pointer = currentPointer ;
        // 开始交换位置
        
        currentItem.collisionCheck() ;
        
        
      }) ;
      $(document).mouseup(function() {
        if(!isDrag) return false ;
        isDrag = false ;
        currentItem.move(function() {
          $(this).css({
            "opacity" : "1",
            "z-index" : 0
          }) ;
        }) ;
      }) ;
    }
    this.init() ;
  }) ;
}) ;