Maison  >  Article  >  interface Web  >  Comment jquery réalise-t-il un saut vers la gauche à chaque fois qu'un déplacement de la souris se produit pendant le glissement ?

Comment jquery réalise-t-il un saut vers la gauche à chaque fois qu'un déplacement de la souris se produit pendant le glissement ?

黄舟
黄舟original
2017-06-28 10:35:581664parcourir

jQuery a écrit un glisser-déposer, mais à chaque fois que vous déplacez la souris, il y a toujours un saut vers la gauche. Comment peut-il ne pas y avoir un tel saut ?

.wrap{
width:328px;
position: absolute;
left:50%;
top:30%;
margin-left:-164px; //应该是这个margin-left造成的
padding:10px;
background:#eeeeee;
border-radius: 10px;
} 
//js
$('.wrap').on('mousedown',function(e){
var _this=$(this)
disX=e.clientX-$(this).offset().left;
disY=e.clientY-$(this).offset().top;
$(document).on('mousemove',function(e){
_this.css('left',e.clientX-disX)
_this.css('top',e.clientY-disY)
}); $(document).on('mouseup',function(){ $(this).unbind('mousemove');
})
})

L'élément enfant divItem est au-dessus de la divBox
Lorsque la souris se déplace vers le divItem, elle est déjà passée de la divBox à un autre élément
Déclenchez d'abord l'événement mouseout du. divBox. Déclenchez ensuite l’événement mouseover de divItem.

Vos besoins ne peuvent pas être réalisés directement. Voyez si vous pouvez trouver un autre moyen d'obtenir l'effet souhaité.
1. La méthode appelée par mouseover de divBox peut être appelée dans l'événement mouseover de divItem.
2. À quoi sert votre divItem ? Pouvez-vous utiliser l'image d'arrière-plan de la divBox ?
3. Ou définissez la position : absolue de tous les divs, puis définissez le z-index de la divBox pour qu'il soit supérieur au z-index du divItem,
puis définissez la divBox. à une forme semi-transparente.

Après avoir lu le code pendant une longue période, il n'y a eu aucun problème. Ensuite, j'ai supprimé le CSS et c'était ok. Ensuite, j'ai supprimé margin-left:-164px ou je l'ai remplacé par un nombre non négatif. c'était bien aussi

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn