这是一款使用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()="" ;="" })="" ;="" })="" ;="">

在线预览    源码下载