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

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 :

 

 

  < div class=" head">
                                                                                < >

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

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 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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7316

9

Tutoriel Java

1625

14

Tutoriel CakePHP

1349

46

Tutoriel Laravel

1261

25

Tutoriel PHP

1209

29

Afficher plus