Maison > interface Web > js tutoriel > 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 ?

黄舟
Libérer: 2017-06-28 10:35:58
original
1709 Les gens l'ont consulté

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');
})
})
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal