Maison >interface Web >js tutoriel >Implémentation JS des compétences subforms_javascript en matière de glisser et de déplacer la souris

Implémentation JS des compétences subforms_javascript en matière de glisser et de déplacer la souris

WBOYoriginal: 2016-05-16 16:58:29907parcourir

1. Sous-formulaire

Lors de la conception d'un site Web, nous devons concevoir des sous-formulaires modaux, tels que

Cette étape est facile à mettre en œuvre, vous n'avez besoin que de div css, veuillez consulter le code :

Copiez le code Le code est la suivante :

Copier le code Le code est le suivant :.modal-background

{

background-color : #999999;
bas : 0;
gauche : 0;
opacité : 0,3;
position : fixe ;
droite : 0;
haut : 0;
z -index : 1100;
}

.modal-window
{ couleur d'arrière-plan : #FFFFFF;

bordure : 1px solide #6B94AD;
ombre de boîte : 5px 5px 5px #6B94AD;
famille de polices : 'Microsoft YaHei';
taille de police : 12px;
hauteur : 120px;
gauche : 50%;
marge-gauche : -160px;
marge-haut : -160px;
opacité : 1 ;
position : fixe ;
haut : 50 % ;
largeur : 320 px ;
z-index : 1110 ;
}

.modal-window .head
{

hauteur : 25px;

couleur : #fff;
poids de la police : 600 ;
image d'arrière-plan : -moz-linear-gradient (en haut, #4A8CC5, #2963A5); /* Firefox */
background-image : -webkit-gradient(linéaire, en haut à gauche, en bas à gauche, color-stop(0, #4A8CC5), color-stop(1 , #2963A5)); /* Saf4, Chrome */
filtre : progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0'); */
}

.modal-window .head center
{

padding-top : 2px;

}

En ajoutant le html et le css ci-dessus, vous pouvez facilement obtenir l'effet du formulaire modal ci-dessus. Parmi eux, left : 50 % ; top : 50 % ; margin-left : -160px ; margin-top : -160px ;

Bien sûr, la taille du formulaire modal est fixée dans la classe de style .modal-window. Cela ne veut pas dire que la taille du formulaire modal ne peut pas être modifiée. Par exemple, j'ai écrit le code suivant :

Copier le code Le code est le suivant :

 Ma position
                                                        
Dans la deuxième ligne de code, la classe de style .list-window est ajoutée pour couvrir la taille et la position dans la classe .modal-window, mais en même temps garantir que le formulaire modal est affiché au centre 

Copier le code

Le code est le suivant :

.list-window{ largeur:600px; hauteur:400px; marge-gauche:-300px; marge-haut:-200px;

}

Comme le montre l'image

Implémentation JS des compétences subforms_javascript en matière de glisser et de déplacer la souris

On voit que la mise en œuvre de cette étape est très simple. Maîtriser les attributs CSS de quelques lignes clés "abusera complètement" de ce sous-formulaire modal. Vous pouvez tirer des conclusions sur d'autres sous-formulaires modaux.

2. Comment glisser-déposer le sous-formulaire lorsque la souris clique sur la tête du sous-formulaire ? Lorsque jQ est introduit, nous n'avons besoin que de quelques scripts pour implémenter cette petite fonction. Si vous n’y croyez pas, voyons voir

Copier le code Le code est le suivant :

var gauche, haut, $this;
$ (document).delegate('.modal-window .head', 'mousedown', function (e) {
 left = e.clientX, top = e.clientY, $this = $(this). css(' curseur', 'move');
 this.setCapture ? (
 this.setCapture(),
 this.onmousemove = function (ev) { mouseMove(ev || event); }, 
 this.onmouseup = mouseUp
 ) : $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
});
function mouseMove(e) {
 var target = $this.parents('.modal-window');
 var l = Math.max((e.clientX - left Number(target.css('margin-left').replace (/px $/, '')) || 0), -target.position().left);
 var t = Math.max((e.clientY - top Number(target.css('margin- top') .replace(/px$/, '')) || 0), -target.position().top);
 l = Math.min(l, $(window).width() - target.width () - target.position().left);
 t = Math.min(t, $(window).height() - target.height() - target.position().top); 
 left = e.clientX;
 top = e.clientY;
 target.css({ 'margin-left': l, 'margin-top': t });
}
function mouseUp (e) {
 var el = $this.css('cursor', 'default').get(0);
 el.releaseCapture ?
 (
 el.releaseCapture( ),
 el.onmousemove = el.onmouseup = null
 ): $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp);
}

Ce code est très court et peut fonctionner sans problème dans différents navigateurs.

En fait, son principe de mise en œuvre est très simple et peut être grossièrement divisé en trois étapes :

①Lorsque la souris est cliqué vers le bas (mousedown) sur la tête du formulaire modal, liez immédiatement les événements mousemove et mouseup au document

② Lorsque la souris ne rebondit pas (pas de mouseup), si la souris se déplace dans le formulaire, la fonction mouseMove est activée et la position de l'ensemble du formulaire est déplacée dans le temps en calculant la distance du mouvement de la souris.

③Lorsque la souris rebondit (mouseup), appelez l'événement mouseUp pour dissocier l'événement mousemove et l'événement mouseup liés au document.

Le principe de l'ensemble du processus est le suivant : lorsque la souris est enfoncée, l'événement de mouvement de la souris est transféré au document et l'ensemble du formulaire est traité via l'événement de mouvement de la souris sur le document.

De plus, il y a une petite astuce dans mouseMove, c'est-à-dire que les variables globales gauche et supérieure enregistrent la position du dernier arrêt de la souris, puis comparent la position de la souris avec les variables gauche et supérieure la prochaine fois. le temps où il se déplace pour déterminer la distance parcourue par la souris pour déplacer l'ensemble du sous-formulaire modal en conséquence.

Après avoir analysé ce bout de code, j'ai constaté qu'il est assez simple de déplacer le formulaire ou même n'importe quel élément du document avec la souris

Par exemple, si vous souhaitez modifier la taille du formulaire par glisser-déposer, il suffit d'ajuster la taille du formulaire dans la fonction de gestionnaire d'événements mouseMove. Pensez-vous que vous avez appris une autre astuce ? avancer ?

Certaines personnes peuvent se demander ce que font respectivement setCapture et releaseCapture ? En fait, c'est pour la compatibilité avec IE. Seul IE a ces deux fonctions. Je méprise IE ici. setCapture permet à l'élément actuel de capturer tous les événements de la souris. Si vous ne les utilisez pas, il risque de ne pas être compatible avec le navigateur IE.

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

Article précédent：js définit la valeur par défaut des paramètres de fonction (adapté aux cas où aucun paramètre n'est transmis)_compétences javascriptArticle suivant：js définit la valeur par défaut des paramètres de fonction (adapté aux cas où aucun paramètre n'est transmis)_compétences javascript

Articles Liés

Voir plus