jQuery faisant glisser un div, déplacer un div et principes de mise en œuvre de la couche contextuelle et exemples_jquery

Démonstration de code :

http://www.imqing.com/demo/movediv.html

Principe général :

Rendre la position du div absolue, puis contrôler Ses valeurs supérieure et gauche doivent surveiller les événements de la souris, principalement mousedown, mousemove et mouseup.

Après le déplacement de la souris, enregistrez la position de la souris et du div qui doit être déplacé pendant le déplacement de la souris, puis obtenez la différence entre les deux pour obtenir la position du div après le déplacement de la souris. C'est-à-dire :

left = position actuelle de la souris.x - (valeur .x lorsque l'on clique sur la souris - valeur x de la position initiale du div)
top = position actuelle de la souris.y - (. y lorsque l'on clique sur la souris, valeur - la position initiale y valeur du div)

Code :

Copier le code Le code est le suivant :

equiv="Content-Type" content="text /html;charset=UTF-8">


🎜>

Banner">Cliquez ici pour déplacer le div actuel

Voici un autre contenu

TOUS droits réservés Qing Copyright

🎜>jQuery(document).ready (
function() {
$('#banner').mousedown(
function (event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top
$( document).mousemove(function (event ) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({'left':event.pageX - abs_x , 'top':event.pageY - abs_y});
}
}
).mouseup(
function () {
isMove = false;
}
) ;
}
);
}


🎜>En fait, il n'y a pas beaucoup de code Oui, hehe. Le point clé est que la position du div qui doit être déplacé est positionnée de manière absolue, puis l'événement de souris est détecté. hé-hé.