En parlant d'interface utilisateur graphique, on ne peut que mentionner la technologie Drag et laissez tomber(littéralement: Tirez et lancez).

Cette technologie est basée sur des éléments de glisser-déposer interface graphique de la source au récepteur. L'interface est accessible uniquement avec une souris (touchpad, trackball) ou un écran tactile.

Un élément déplaçable est saisi et maintenu avec la souris tout en étant déplacé vers un autre emplacement en même temps. Lorsque la souris est dans la bonne position, le bouton de la souris est relâché, libérant l'objet.

Cependant, l'interface Drag'n Drop doit être distinguée des contrôles d'interface qui ont des méthodes dans leurs méthodes qui sont responsables du déplacement, implémentées de la même manière. Par exemple, une fenêtre (formulaire) a la possibilité de se déplacer sur l'écran (en faisant glisser la zone de titre). ScrollBox a un curseur de défilement. Mais dans les deux exemples, le glissement est une action (événement) interne (pour le composant) et n'affecte en aucune façon les autres objets du système.

Faites glisser et Interface de dépôt s'applique uniquement au déplacement d'un objet d'un conteneur à l'autre, même si les conteneurs sont hétérogènes. Par exemple, faire glisser un fichier d'un dossier vers un e-mail.

Interface glisser-déposer dans les technologies Web

L'utilisation d'interfaces glisser-déposer dans les technologies Web a été une percée dans . Il existe des éditeurs de glisser-déposer hors ligne (par exemple, DreamWeaver) et en ligne (par exemple, tout constructeur de site Web moderne.

Il est plus facile de prendre quelque chose et de le mettre que d'écrire ce que vous devez prendre et où le mettre. Bien sûr, sans souris ou appareil similaire, vous ne pouvez rien sélectionner ni spécifier, mais même dans l'état actuel des choses, utiliser l'idée du glisser-déposer est très naturel et confortable.

La portée de l'idée n'est pas seulement les magasins en ligne, bibliothèques numériques, rechercher ou Systèmes d'information, mais aussi la zone appliquée. L'idée est très applicable dans le développement de sites et de leurs éléments, créés et maintenus de manière interactive, sans la participation d'un programmeur.

Description de l'idée

Sélectionnez, déplacez et placez - l'idée est naturelle et pratique. Il est tout simplement étonnant qu'elle ne soit pas née lorsque la souris est devenue un accessoire indispensable pour l'ordinateur.

L'exemple le plus évident est le choix d'un produit dans une boutique en ligne. Sélectionnez le produit souhaité avec la souris et faites-le glisser dans le panier - simplement, naturellement et confortablement. Téléchargement de fichier : prendre un document en dehors de la fenêtre du navigateur et le placer sur un élément de la page, initiant ainsi le transfert du document vers le serveur, est également une idée pratique.

Pour le développeur, l'idée de "glisser-déposer" est la manipulation des éléments de la page sans recalculer manuellement les coordonnées et les tailles des balises, la possibilité de sélectionner plusieurs éléments et de les aligner, et de déplacer les côtés des balises de bloc.

HTML et CSS - grandes langues descriptions des balises et de leurs styles de conception, mais lorsqu'un développeur a la possibilité de manipuler de manière interactive des éléments de page sans recalculer manuellement les coordonnées et les tailles, cela rend le travail plus confortable et efficace.

Transfert de fichiers facile

"Glisser-déposer" : la traduction de l'anglais vers le russe ressemble littéralement à "glisser-déposer". En pratique, cela sonne et fonctionne mieux : choisissez, transférez et lâchez prise - simplement et naturellement.

La mise en place de transferts de fichiers d'une page à une page, vers un serveur, ou pour un autre usage est très simple.

DANS cet exemple Plusieurs fichiers sur le bureau ont été sélectionnés avec la souris (figure de gauche). Sur la sélection, le bouton gauche de la souris a été enfoncé et la sélection "est allée" au panier. Le navigateur lui-même a montré comment cela se produit, a écrit un indice de "copie" et a créé les contours des fichiers déplacés.

Lorsque la souris était sur le panier, le visiteur a relâché bouton gauche souris, l'événement glisser-déposer a eu lieu et sur la page du site (image du bas), le code JavaScript a pu recevoir et traiter tous les fichiers que le visiteur a fournis à la page (site).

Description de la mise en œuvre

Le code qui exécute cette procédure est très simple. Même un développeur novice peut le répéter dans tous les cas d'utilisation.

Ici, l'interface utilisateur est représentée par deux balises : scPlaceFile (c'est le panier lui-même où vous voulez mettre des fichiers) et scPlaceFiles (c'est le résultat du traitement des fichiers, dans ce cas une liste de ceux-ci).

La logique de la page est la suivante. Lorsque la page est chargée dans le navigateur, le gestionnaire d'événements "ondrop" est affecté dans le panier - mis, le reste des événements est bloqué et non utilisé.

La page fonctionne normalement, mais dès que le visiteur sélectionne le ou les fichiers et les fait glisser vers l'image du panier, c'est-à-dire vers la balise scPlaceFile, l'événement "les fichiers sont arrivés" sera traité.

Ce gestionnaire affiche simplement une liste de fichiers. Leur numéro se trouve dans event.dataTransfer.files.length, et les informations sur chaque fichier se trouvent dans event.dataTransfer.files[i].name. Que faire des données reçues est déterminé par le développeur, dans ce cas, une liste des fichiers reçus est simplement formée.

Une fois traité, l'événement est bloqué et non propagé. Cela est nécessaire pour que le navigateur ne se livre pas à des activités d'amateur et n'interfère pas avec le traitement des informations reçues.

DnD et données externes

Le téléchargement d'images sur le serveur par "glisser-déposer" est une pratique courante dans cette technologie. En règle générale, un développeur crée un formulaire de téléchargement de fichier (1) qui fonctionne de la manière habituelle (2). Le visiteur peut mode normal sélectionnez les fichiers et chargez-les.

Cependant, si un visiteur glisse et dépose à un certain endroit dans le formulaire, le champ du nom de fichier (fichiers) sera rempli automatiquement.

Ce bonne décision. Il est bien sûr très difficile d'admettre qu'il n'y a pas de souris sur l'ordinateur. Mais il est préférable de développer l'interface utilisateur de la manière habituelle et dans l'implémentation DnD.

DnD et données internes

Prendre soin des intérêts du visiteur est toujours important, mais les préoccupations du développeur comptent également. Vous pouvez implémenter le "glisser-déposer" non seulement signifie standard, mais aussi en gérant les événements de souris sur les éléments de la page.

La tâche de calculer les valeurs des coordonnées des balises et leurs tailles se pose constamment. Calcul manuel - bonnes pratiques, mais la version interactive est plus pratique. Toutes les balises sont toujours de forme rectangulaire, et en surveillant les événements de la souris sur les côtés des éléments, vous pouvez créer la possibilité de déplacer automatiquement les éléments au bon endroit sur la page, ou de les modifier.

Gestion de l'événement de clic du bouton de la souris - mémorisation des coordonnées de l'emplacement du clic, par exemple, l'un des côtés de l'élément. Déplacer la souris - le côté se déplace vers la bonne direction. Relâcher le bouton de la souris - le côté s'arrête et ses coordonnées changent. De cette façon, vous pouvez modifier la position de l'élément ou sa taille.

Ce n'est pas formellement un glisser-déposer, mais l'effet est similaire et pratique. En créant des gestionnaires universels pour n'importe quel élément de page, vous pouvez obtenir un bon résultat interactif, accélérer le développement et simplifier le code.

Programmation visuelle et manuelle

Une souris sur un ordinateur et des doigts sur un smartphone sont des approches complètement différentes de la mise en œuvre de l'interface utilisateur (visiteur, développeur). C'est une exigence tout à fait naturelle et moderne pour la compatibilité entre navigateurs.

Tout cela ensemble rend difficile la création de pages, mais en appliquant l'idée de glisser-déposer dedans forme standard, en utilisant ses événements, en combinant cette idée avec les événements habituels sur les éléments, vous pouvez implémenter un mécanisme dans lequel la création de la page se produira visuellement.

Voyons maintenant la sélection d'un ou plusieurs éléments. Fait de sélection - l'apparition d'un menu contextuel, par exemple, le but est d'aligner celui sélectionné (gauche, droite, centre), ou de répartir les éléments verticalement ou horizontalement avec le même pas, ou de modifier leurs tailles (minimum, maximum).

Le recalcul automatique des coordonnées et des dimensions est préférable au manuel. Moins d'erreurs - l'objectif est atteint plus rapidement. De plus, vous pouvez créer une page dans un navigateur, enregistrer la position et la taille des éléments. En ouvrant cette page sur un smartphone, vous pouvez corriger les coordonnées et les dimensions et les mémoriser pour modèle spécifique version smartphone ou navigateur.

Ainsi, la même page sans conformité manuelle avec l'exigence de compatibilité entre navigateurs aura des données différentes à afficher sur divers appareils et dans différents navigateurs.

Si vous permettez au visiteur d'effectuer lui-même ces procédures, ainsi que de sélectionner les éléments de page nécessaires parmi ceux fournis par le développeur, vous pouvez garantir la compatibilité entre navigateurs et la fonctionnalité requise de la page, en tenant compte de l'avis de l'utilisateur.

Pour la bibliothèque VCL, Borland a implémenté sa propre version de l'interface Drag&Drop (traduit par "glisser"). Cette interface est interne - vous pouvez envoyer et recevoir tous les contrôles Delphi à l'intérieur du formulaire "(à l'exception du formulaire lui-même). Elle est implémentée sans utiliser les fonctions API Windows correspondantes - elles doivent être utilisées lors de l'organisation de la communication avec d'autres tâches par glisser-déposer.

En appuyant sur le bouton gauche de la souris sur le contrôle, nous pouvons le "faire glisser" vers n'importe quel autre élément. Du point de vue du programmeur, cela signifie qu'au moment de faire glisser et de relâcher la touche, certains événements sont générés qui transmettent toutes les informations nécessaires - un pointeur vers l'objet déplacé, les coordonnées actuelles du curseur, etc. Le récepteur d'événements est l'élément sur lequel le ce moment le curseur se trouve. Le gestionnaire d'un tel événement doit indiquer au système si le contrôle donné accepte ou non "l'envoi". Lorsque le bouton est relâché sur la commande du récepteur, un ou deux événements supplémentaires sont déclenchés, selon l'état de préparation du récepteur.

CancelDrag Annule l'opération de glisser-déposer ou de glisser-ancrer en cours.

Fonction FindDragTarget (const Pos : TPoint ;AllowDisabled : Boolean ): TControl ;

La fonction renvoie un objet de la classe de base TControl , qui fait référence à la position de l'écran avec les coordonnées spécifiées par le paramètre Pos. Cette fonction permet de déterminer le destinataire potentiel d'une opération de glisser-déposer ou de glisser-ancrer. Si aucun contrôle de fenêtre n'existe pour la position spécifiée, la fonction renvoie nil . Le paramètre AllowDisabled détermine si les objets désactivés seront pris en compte.

Function IsDragObject(Sender: TObject ): Boolean ;

La fonction détermine si l'objet spécifié dans le paramètre Sender est un descendant de la classe TDragObject. Cette fonction peut être utilisé comme paramètre Source dans les gestionnaires d'événements OnDragOver et OnDockOver pour déterminer si l'objet déplacé sera accepté. En outre, la fonction IsDragObject peut être utilisée comme paramètre Source dans les gestionnaires d'événements OnDragDrop et OnDockDrop afin d'interpréter correctement l'objet déplacé.

DragMode, propriétés DragCursor, méthodes BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, paramètre Accept

Le processus consistant à faire glisser des informations d'un objet à un autre avec la souris est largement utilisé dans les veuves. Vous pouvez déplacer des fichiers entre des dossiers, déplacer des dossiers eux-mêmes, etc.

Toutes les propriétés, méthodes et événements associés au processus de glisser-déposer sont définis dans la classe TControl, qui est le parent de tous les composants visuels Delphi. Ils sont donc communs à tous les composants.

Le début du glissement est déterminé par la propriété DragMode, qui peut être définie au moment du design ou par programmation égale à dmManual ou dmAutomatic. La valeur de dmAutomatic (automatique) détermine le démarrage automatique du processus de glissement lorsque l'utilisateur clique avec le bouton de la souris sur le composant. Cependant, dans ce cas, l'événement OnMouseDown associé à l'utilisateur qui appuie sur le bouton de la souris ne se produit pas du tout pour ce composant.

L'interface de transfert et de réception des composants est apparue il y a longtemps. Il fournit une interaction entre deux contrôles lors de l'exécution de l'application. Dans ce cas, toutes les opérations nécessaires peuvent être effectuées. Malgré la simplicité de mise en œuvre et l'âge du développement, de nombreux programmeurs (surtout débutants) considèrent ce mécanisme obscur et exotique. Cependant, l'utilisation du glisser-déposer peut être très utile et facile à mettre en œuvre. Nous allons maintenant vérifier cela.

Pour que le mécanisme fonctionne, deux contrôles doivent être configurés en conséquence. L'un doit être la source (Source), le second - le récepteur (Target). Dans ce cas, la source ne se déplace nulle part, mais est seulement enregistrée comme telle dans le mécanisme.

Croyez-moi, c'est assez facile à transformer Coordonnées X,Y, passées dans les paramètres des événements OnDragOver et OnDragDrop, en coordonnées de formulaire.

Travaillez avec les propriétés Left et Top du composant survolé par le curseur. Je vais donner un exemple simple. Placez un composant Memo sur le formulaire et définissez sa propriété Align sur alTop. Placez un panneau sur le formulaire, définissez également la propriété Align sur alTop et définissez la propriété Height sur une petite valeur, disons 6 ou 7 pixels. Définissez DragMode sur dmAutomatica et DragCursor sur crVSplit. Placez un autre composant Memo et définissez Aligner sur alClient. Sélectionnez les deux mémos en même temps, le panneau, et créez un gestionnaire d'événements OnDragOver commun comme indiqué ci-dessous :

Les interfaces HTML Drag and Drop permettent aux applications d'utiliser les fonctionnalités de glisser-déposer dans les navigateurs. L'utilisateur peut sélectionner déplaçableéléments avec une souris, faites glisser ces éléments vers un largableélément, et déposez-les en relâchant le bouton de la souris. Une représentation translucide de la déplaçableéléments suit le pointeur pendant l'opération de glissement.

Pour les sites Web, les extensions et les applications XUL, vous pouvez personnaliser les éléments qui peuvent devenir déplaçable, le type de rétroaction déplaçable les éléments produisent, et les largableéléments.

Cette présentation du glisser-déposer HTML comprend une description des interfaces, les étapes de base pour ajouter la prise en charge du glisser-déposer à une application et un résumé de l'interopérabilité des interfaces.

Faire glisser des événements Événement activé Le gestionnaire d'événements se déclenche lorsque…

glisser	ondrag	…un élément déplacé(sélection d'éléments ou de texte) est glissé.
traîner	ondragend	…une opération de glissement se termine (comme le relâchement d'un bouton de la souris ou l'appui sur la touche Échap ; voir Fin d'un glissement .)
dragenter	ondragenter	…un élément déplacé entre dans une cible de dépôt valide. (Voir Spécification des cibles de dépôt .)
dragexit	ondrageexit	…un élément n'est plus la cible de sélection immédiate de l'opération de glissement.
glisser-déposer	ondragleave	…un élément déplacé laisse une cible de dépôt valide.
trainer	ondragover	… un élément déplacé est déplacé sur une cible de dépôt valide, toutes les quelques centaines de millisecondes.
glisser-démarrer	ondragstart	…l'utilisateur commence à faire glisser un élément. (Voir Démarrage d'une opération de glissement .)
goutte	goutte	… un élément est déposé sur une cible de dépôt valide. (Voir Exécution d'un dépôt.)

Remarque : aucun événement dragstart ni dragend n'est déclenché lorsque vous faites glisser un fichier dans le navigateur à partir du système d'exploitation.

Interfaces Les bases

Cette section est un résumé des étapes de base pour ajouter la fonctionnalité de glisser-déposer à une application.

identifier ce qui est déplaçable

Fabriquer un élément déplaçable nécessite l'ajout de l'attribut draggable et du gestionnaire d'événements global ondragstart, comme illustré dans l'exemple de code suivant :

function dragstart_handler(ev) ( // Ajoute l'id de l'élément cible à l'objet de transfert de données ev.dataTransfer.setData("text/plain", ev.target.id); ) window.addEventListener("DOMContentLoaded", () => ( // Obtient l'élément par id const element = document.getElementById("p1"); // Ajoute l'écouteur d'événement ondragstart element.addEventListener("dragstart", drag start_handler); ));

Cet élément est déplaçable.

Pour plus d'informations, consultez :

gérer la chute effet

Le gestionnaire de l'événement drop est libre de traiter les données de glissement d'une manière spécifique à l'application.

En règle générale, une application utilise la méthode getData() pour récupérer les éléments de glissement, puis les traite en conséquence. De plus, la sémantique de l'application peut différer selon la valeur du

Utilisation de la technologie glisser déposer(glisser-déposer) permet à l'utilisateur de déplacer divers objets de l'un à l'autre, par exemple des éléments d'une liste à une autre. Pour ce faire, vous devez utiliser deux contrôles : un puits et une source. Le récepteur est l'objet qui recevra l'objet source (objet mobile).

Les événements qui se produisent lors du déplacement d'objets sont répertoriés ci-dessous dans l'ordre dans lequel ils se produisent.

OnStartDrag(type TStartDragEvent) - généré par l'objet source au début de l'opération. Paramètres passés au gestionnaire d'événements : objet récepteur DragObject (type TDragObject), objet source (type TObject).

OnDragOver(type TDragOverEvent) - crée un objet cible lorsqu'un objet flottant est placé au-dessus. Paramètres passés au gestionnaire d'événements : l'objet récepteur Sender (type TObject), l'objet source Source (type TObject), l'état de déplacement State (type TDragState), X et Y (type entier) - les coordonnées actuelles du pointeur de la souris, Accept (type booléen) un signe de confirmation de l'opération de déplacement. L'état du mouvement indique clairement si l'objet déplacé se trouve dans la zone de réception, s'il s'y déplace, l'a quitté. Les paramètres passés permettent à l'objet récepteur d'accepter ou de rejeter l'objet source. Le paramètre Accept est défini sur Trye si l'opération de déplacement est acceptée, False sinon.

onDragDrop (type TDragDropEvent) - Levé par l'objet de destination lorsque l'objet glissé est déposé dessus. Le gestionnaire d'événements reçoit les coordonnées actuelles du pointeur de la souris, de l'objet récepteur Sender (type TObject) et de l'objet de mouvement Source d'origine (type TObject).

onEndDrag (type EndDragEvent) - Levé lorsqu'une opération de glissement se termine. Les coordonnées X et Y du point où l'objet source Sender et l'objet récepteur Target sont transmis au gestionnaire d'événements.

Pour créer un glisser-déposer, il suffit d'implémenter deux événements : OnDragDrop et OnDragOver avec la propriété DragMode définie sur dmAutomatic. Sinon, le début de l'opération de déplacement, la méthode BeginDrag, doit être codé par le programmeur.

Pour consolider le matériel, nous allons créer l'application suivante. Placez un composant Panel sur le formulaire. Définissez la propriété DragMode de l'inspecteur d'objets sur dmAutomatic. Sélectionnez l'objet de formulaire et utilisez l'inspecteur d'objets pour créer les événements suivants :

Procedure TForm1.FormDragOver(Sender, Source : TObject ; X, Y : Integer ; State : TDragState ; var Accept : Boolean) ; begin if Source = Panel1 then Accept:= True else Accept:= False ; fin; procedure TForm1.FormDragDrop(Sender, Source : TObject; X, Y : Integer); beginPanel1.Left :=X ; Panneau1.Haut :=Y ; fin;

Maintenant, en exécutant l'application et en appuyant sur le bouton de la souris sur le panneau, nous pouvons déplacer l'objet panneau dans tout le formulaire.

Conclusion : nous nous sommes familiarisés avec la technologie glisser déposer(glisser-déposer) et utilisé dans la pratique.