HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

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

2017-1-3 09:20| 发布者: admin| 查看: 1135| 评论: 0

摘要: 这是一款使用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() ;
  }) ;
}) ;




鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-2-23 10:47

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部