suchen

Heim >Web-Frontend >js-Tutorial >jQuery implementiert die Drag-Sortierung von Bildern auf der Navigationsseite einer Portal-Website

jQuery implementiert die Drag-Sortierung von Bildern auf der Navigationsseite einer Portal-Website

php中世界最好的语言
php中世界最好的语言Original
2018-04-26 16:31:482026Durchsuche

Dieses Mal bringe ich Ihnen jQuery zum Implementieren des Ziehens und Sortierens von Bildern auf der Navigationsseite einer Portal-Website. Was sind die Vorsichtsmaßnahmen für die Implementierung von jQuery zum Implementieren des Ziehens und Sortierens von Bildern auf der Navigationsseite? Das Folgende ist ein praktischer Fall.

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte 360-Navigationsseitensymbol-Drag-Sortier-Effektcode lautet wie folgt: 

<!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=utf-8" />
<title>图标拖动排序效果代码</title>
<script src="js/jq.js"></script>
<script>
 $(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;
 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;
}
</style>
</head>
<body>
 <p class="item_container">
 <p class="item_content">
  <ul>
  <li>
   <p class="item">
   <img src="images/youku.png" />
   </p>
  </li>
  <li>
   <p class="item">
   <img src="images/jd.png" />
   </p>
  </li>
  <li>
   <p class="item">
   <img src="images/taobao.png" />
   </p>
  </li>
  <li>
   <p class="item">
   <img src="images/fenghuan.png" />
   </p>
  </li>
  <li>
   <p class="item">
   <img src="images/souhu.png" />
   </p>
  </li>
  <li>
   <p class="item">
   <img src="images/wangyi.png" />
   </p>
  </li>
  <li>
   <p class="item">
   <img src="images/renren.png" />
   </p>
  </li>
  <li>
   <p class="item">
   <img src="images/360.png" />
   </p>
  </li>
  <li>
   <p class="item">
   <img src="images/360game.png" />
   </p>
  </li>
  </ul>
 </p>
 </p>
<p style="text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</p>
</body>
</html>

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des Tablesorter-Plug-Ins (mit Groß-/Kleinschreibung)

jquery implementiert die Sortierung nach chinesischen Tabellen

Das obige ist der detaillierte Inhalt vonjQuery implementiert die Drag-Sortierung von Bildern auf der Navigationsseite einer Portal-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JQuery-Maus-Ziehen der Tabelle zum Sortieren (Code angehängt)Nächster Artikel：JQuery-Maus-Ziehen der Tabelle zum Sortieren (Code angehängt)

In Verbindung stehende Artikel

Mehr sehen