Cette fois, je vais vous présenter jQuery pour implémenter le glisser et le tri des images sur la page de navigation d'un site Web portail. Quelles sont les précautions pour implémenter jQuery pour implémenter le glisser et le tri des images sur la page de navigation. d'un site portail. Ce qui suit est un cas pratique. Levez-vous et jetez un oeil.
Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code d'effet de tri par glisser-déposer des icônes de la page de navigation 360 partagé avec vous est le suivant
<!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 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
</p>
</body>
</html>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres articles connexes sur le site Web PHP chinois !
Lecture recommandée :
Explication détaillée de l'utilisation du plug-in tablesorter (avec étui)
jquery implémente le tri selon les tables chinoises
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment modifier le texte dans l'image
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Que faire si l'image intégrée ne s'affiche pas complètement
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
