别人用jquery写的图片拖拽效果

最新推荐文章于 2023-09-16 23:19:02 发布

转载最新推荐文章于 2023-09-16 23:19:02 发布 · 953 阅读

文章标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>拖动</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
/*
作者: 谢泽龙
联系QQ: 454675335 (灬丿Spam丶)
时间: 2014-9-24
www.jq22.com
*/

$(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() ;
  }) ;
}) ;
</script>
<style>
.item_content ul {
  list-style:none;
}
.item_content ul li {
  width:200px;
  height:120px;
  float:left;
  margin:10px
}
.item_content {
  width:740px;
  height:460px;
  border:1px solid #ccc;
  float:left;
}

.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;

}

</style>
</head>

<body>