182

Dans cet exemple, nous sélectionnons un élément div et le rendons mobile en appelant la méthode draggable() dessus. Comme le montre la figure ci-dessous, dans le document ouvert, l'élément prend sa position habituelle, mais il peut ensuite être déplacé à l'aide du pointeur de la souris vers n'importe quel endroit de la fenêtre du navigateur :

La possibilité de glisser-déposer des éléments est utile en soi, mais elle est encore plus utile lorsqu'elle est utilisée conjointement avec l'interaction Droppable, décrite ci-après.

L'interaction déplaçable est obtenue uniquement grâce à l'utilisation de balises HTML et de styles CSS spécifiques. Cela signifie que cette fonctionnalité fonctionnera dans presque tous les navigateurs, mais les éléments qui en sont dotés ne pourront pas fonctionner avec des fonctionnalités de glisser-déposer natives similaires des systèmes d'exploitation.

Les opérations de glisser-déposer définies par la spécification HTML5 sont généralement implémentées à l'aide des mécanismes natifs du système d'exploitation. Si vous utilisez le mécanisme de glisser-déposer de jQuery UI, il est préférable de désactiver les fonctionnalités HTML5 équivalentes pour éviter les conflits. Pour ce faire, définissez l'attribut draggable de l'élément body du document sur false.

Configuration de l'interaction Draggable

Il existe de nombreuses options de personnalisation pour les interactions déplaçables. Les propriétés les plus importantes, abordées dans les sections suivantes, sont présentées dans le tableau ci-dessous :

Propriétés d'interaction déplaçables Description de la propriété

axe	Limite la capacité de se déplacer dans certaines directions. La valeur par défaut est false, ce qui signifie aucune contrainte, mais vous pouvez également spécifier une valeur de "x" (déplacement le long de l'axe X uniquement) ou "y" (déplacement le long de l'axe Y uniquement).
endiguement	Limite l'emplacement de l'élément déplacé vers une zone spécifique de l'écran. Les types de valeurs prises en charge sont décrits dans le tableau ci-dessous, à l'aide de l'exemple correspondant. La valeur par défaut est false, ce qui signifie aucune restriction
retard	Spécifie la durée pendant laquelle un élément doit être déplacé avant de se déplacer. La valeur par défaut est 0, ce qui signifie aucun délai
distance	Définit la distance à laquelle l'utilisateur doit faire glisser un élément depuis sa position de départ avant qu'il ne se déplace réellement. La valeur par défaut est 1 pixel
grille	Force l'alignement de l'élément déplacé sur les cellules de la grille. La valeur par défaut est false, ce qui signifie aucune liaison

Limiter les directions de mouvement

Il existe plusieurs manières de limiter le mouvement d'un élément à certaines directions. La première consiste à utiliser l'option d'axe, qui vous permet de limiter la direction du mouvement à l'axe X ou Y. Un exemple de ceci est présenté ci-dessous :

... div.dragElement (taille de police : grande ; bordure : noire unie fine ; remplissage : 16 px ; largeur : 8em ; alignement du texte : centre ; couleur d'arrière-plan : gris clair ; marge : 4px ) $(function() ( $ ("".dragElement").draggable(( axe: "x").filter("#dragV").draggable("option", "axis", "y"); )); Faire glisser verticalement Faire glisser horizontalement Exécuter l'exemple

Dans cet exemple, nous définissons deux éléments div, les sélectionnons à l'aide de jQuery et appelons la méthode draggable(). Comme argument à cette méthode, nous passons un objet qui restreint initialement le mouvement des deux éléments div à la direction le long de l'axe X. En utilisant ensuite la méthode jQuery filter(), nous pouvons sélectionner l'élément dragV sans que jQuery ne recherche le à nouveau le document entier et définissez-le dans une direction de mouvement autorisée différente - le long de l'axe Y. Ainsi, nous obtenons un document dans lequel un élément div ne peut être déplacé que dans le sens vertical et l'autre - uniquement dans le sens horizontal. Le résultat est présenté sur la figure :

Limiter la zone autorisée de mouvement des éléments

Vous pouvez également limiter la zone de l'écran dans laquelle vous pouvez faire glisser un élément. Pour ce faire, utilisez l’option de confinement. Les formats de valeur pouvant être spécifiés dans cette option sont décrits dans le tableau ci-dessous :

Un exemple d’utilisation de l’option de confinement est donné ci-dessous :

... div.dragElement (taille de police : grande ; bordure : noir uni fin ; remplissage : 16px ; largeur : 8em ; alignement du texte : centre ; couleur d'arrière-plan : gris clair ; marge : 4px ) #container ( bordure : double moyenne noir ; largeur : 700 px ; hauteur : 450 px) $(function() ( $(".dragElement").draggable(( confinement: "parent" )).filter("#dragH").draggable("option", " axe", "x"); )); Faire glisser horizontalement Faire glisser à l'intérieur du parent Exécuter un exemple

Dans cet exemple, les deux éléments sont limités dans leur capacité à se déplacer, de sorte qu'ils ne peuvent être déplacés que dans leur élément parent, qui est un div de taille fixe. L'un des divs flottants a la contrainte supplémentaire d'être flottant en utilisant l'option axis dans la mesure où il ne peut se déplacer qu'horizontalement au sein de son parent. Le résultat est illustré dans la figure :

Limiter la possibilité de déplacer un élément vers des cellules de la grille

L'option de grille vous permet de définir la liaison de l'élément déplacé aux cellules de la grille. Cette option prend comme valeur un tableau de deux éléments précisant la largeur et la hauteur des cellules de la grille en pixels. Un exemple d’utilisation de l’option grille est donné ci-dessous :

... #draggable (taille de police : x-large ; bordure : fine noire unie ; largeur : 5em ; alignement du texte : centre ; remplissage : 10px) $(function() ( $("#draggable").draggable( ( grille: )); )); Exemple Glissez-moi et Exécutez

Cet exemple spécifie une grille avec des cellules de 100 pixels de large et 50 pixels de haut. Lorsque vous faites glisser un élément, il "saute" d'une cellule (invisible) à une autre. L'effet de capture est un excellent exemple de la façon dont la fonctionnalité d'interaction peut être utilisée, mais il est difficile à transmettre à l'aide de captures d'écran.

Vous pouvez créer un effet d'accrochage pour une seule direction en définissant l'axe de mouvement libre sur 1. Par exemple, si vous définissez l'option de grille sur , l'élément s'accrochera à des cellules de grille de 100 pixels de large lorsqu'il sera déplacé horizontalement, mais se déplacera librement verticalement.

Délai de déplacement

Il existe deux options qui permettent de retarder le déplacement d'un élément en mouvement. L'option de délai vous permet de spécifier la durée, en millisecondes, pendant laquelle l'utilisateur doit faire glisser le pointeur de la souris avant que l'élément ne soit réellement déplacé. Un autre type de délai est fourni par l'option distance, qui spécifie la distance en pixels à laquelle l'utilisateur doit faire glisser le pointeur de la souris avant qu'il ne soit suivi par un élément.

Un exemple d'utilisation des deux paramètres est donné ci-dessous :

... #time, #distance (taille de police : grande ; bordure : fine noire unie ; remplissage : 10 px ; largeur : 120 px ; alignement du texte : centre ; couleur d'arrière-plan : gris clair ; marge : 4px ; ) $(function( ) ( $("#time").draggable(( délai : 1000 )) $("#distance").draggable(( distance : 150 )) )); Blocage avec temporisation Blocage avec distance minimale Exemple d'exécution

Dans cet exemple, il y a deux éléments mobiles, dont l'un est retardé à l'aide de l'option de retard et l'autre est retardé à l'aide de l'option de distance.

Dans le cas d'un délai spécifié par l'option delay, l'utilisateur doit faire glisser pendant une durée spécifiée avant de déplacer réellement l'élément. Dans cet exemple, la durée de cette période est de 1000 ms. Il n'est pas nécessaire de déplacer la souris à ce moment-là, mais pendant toute la durée du délai, le bouton de la souris doit rester enfoncé, après quoi l'élément peut être déplacé en déplaçant la souris. Une fois le délai écoulé, l'élément déplacé s'alignera sur l'emplacement du pointeur de la souris, sous réserve des contraintes imposées par les options de grille, de région et d'axe évoquées précédemment.

L'option de distance a un effet similaire, mais dans ce cas, l'utilisateur doit faire glisser le pointeur de la souris d'au moins un nombre spécifié de pixels dans n'importe quelle direction depuis l'emplacement de départ de l'élément. L'élément en cours de déplacement passera alors à l'emplacement actuel du pointeur.

Si vous appliquez les deux paramètres au même élément, l'élément déplacé ne bougera pas tant que les deux critères de retard ne seront pas remplis, c'est-à-dire jusqu'à ce qu'une tentative de déplacement d'un élément dure une durée spécifiée et jusqu'à ce que le pointeur de la souris déplace un nombre spécifié de pixels.

Utilisation des méthodes d'interaction déplaçables

Toutes les méthodes définies pour l'interaction Draggable font partie de l'ensemble des méthodes de base que vous avez déjà vues en regardant les widgets. Il n'existe pas de méthodes spécifiques à l'interaction Draggable, nous ne les aborderons donc pas en détail. La liste des méthodes disponibles est donnée dans le tableau ci-dessous :

Utilisation d'événements d'interaction déplaçables

Interaction Draggable prend en charge un ensemble simple d'événements qui vous avertissent lorsqu'un élément est déplacé. Ces événements sont décrits dans le tableau ci-dessous :

Comme pour les événements de widget, il est également possible de répondre à ces événements. Un exemple de gestion des événements de démarrage et d'arrêt est donné ci-dessous :

... #draggable (taille de police : x-large ; bordure : fine noire unie ; largeur : 190 px ; alignement du texte : centre ; remplissage : 10px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Faites-moi glisser..."), stop: function() ( $("#draggable").text("Faites-moi glisser") ) )) ; )); Exemple Glissez-moi et Exécutez

Cet exemple utilise les événements start et stop pour modifier le contenu textuel d'un élément lors de son déplacement. Cet avantage est dû au fait que l'interaction de Draggable est entièrement implémentée en utilisant HTML et CSS : vous pouvez utiliser jQuery pour changer l'état d'un élément déplaçable même lorsqu'il se déplace sur l'écran.

Utilisation de l'interaction droppable

Faire glisser un élément seul peut suffire dans certaines situations, mais cela est plus utile lorsqu'il est utilisé conjointement avec l'interaction Droppable.

Les éléments auxquels l'interaction Droppable a été appliquée (éléments récepteurs) ont la possibilité d'accepter des éléments mobiles créés à l'aide de l'interaction Draggable.

Les éléments récepteurs sont créés à l'aide de la méthode droppable(), mais pour obtenir des fonctionnalités utiles, vous devrez créer des gestionnaires d'événements parmi ceux définis pour ce type d'interaction. Les événements disponibles sont indiqués dans le tableau ci-dessous :

Événements d'interaction déposables description de l'évenement

créer	Se produit lorsqu'une interaction Droppable est appliquée à un élément
Activer	Se produit lorsque l'utilisateur commence à faire glisser l'élément en cours de déplacement
désactiver	Se produit lorsque l'utilisateur arrête de faire glisser l'élément en cours de déplacement
sur	Se produit lorsque l'utilisateur fait glisser un élément flottant sur un élément récepteur (à condition que le bouton de la souris n'ait pas encore été relâché)
dehors	Se produit lorsque l'utilisateur fait glisser l'élément en cours de déplacement en dehors de l'élément récepteur.
baisse	Se produit lorsque l'utilisateur quitte l'élément en cours de déplacement sur l'élément récepteur

Un exemple de création d'un élément récepteur simple pour lequel un seul gestionnaire d'événement drop est défini est donné ci-dessous :

... #draggable, #droppable (taille de police : grande ; bordure : fine noire unie ; remplissage : 10 px ; largeur : 100 px ; alignement du texte : centre ; couleur d'arrière-plan : gris clair ; marge : 4 px ;) #droppable (remplissage : 20px; position: absolue; droite: 5px;) $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $(" #draggable").text("Gauche") ) )); )); Laissez-moi ici, faites-moi glisser, lancez un exemple

Cet exemple ajoute un élément div au document dont le contenu textuel est représenté par la chaîne « Laisser ici ». Nous sélectionnons cet élément à l'aide de jQuery et appelons la méthode droppable(), en lui transmettant un objet settings qui définit un gestionnaire pour l'événement drop. La réponse à cet événement consiste à modifier le texte de l'élément déplacé à l'aide de la méthode text().

L'interaction glisser-déposer créée dans cet exemple est simple, mais elle fournit un contexte utile pour expliquer comment les interactions déplaçables et déposables fonctionnent ensemble. Les différentes étapes du processus de déplacement des éléments sont illustrées dans la figure :

Tout semble très simple. Nous faisons glisser l'élément déplacé jusqu'à ce qu'il soit au-dessus de l'élément récepteur et le relâchons. L'élément supprimé reste là où il a été laissé et son contenu textuel change en réponse à l'événement drop. Les sections suivantes montrent comment utiliser d'autres événements d'interaction Droppable pour améliorer l'expérience utilisateur.

Éclairage de l'objet récepteur cible

À l'aide des événements d'activation et de désactivation, vous pouvez mettre en surbrillance l'objet de réception cible lorsque l'utilisateur commence le processus de déplacement d'un élément. Dans de nombreuses situations, cette idée est très fructueuse car elle fournit à l'utilisateur des indications fiables quant aux éléments qui font partie du modèle glisser-déposer. Un exemple correspondant est donné ci-dessous :

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Gauche ") ), activer : function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), désactiver : function() ( $("#droppable ").css("border", "").css("background-color", ""); ) )); )); ...Exécuter l'exemple

Dès que l'utilisateur commence à faire glisser un élément, l'événement activate associé à notre élément récepteur est déclenché et la fonction de gestionnaire utilise la méthode css() pour modifier les propriétés CSS border et background-color de cet élément. De ce fait, l'élément récepteur cible est mis en surbrillance, indiquant à l'utilisateur qu'il existe une connexion entre lui et l'élément en cours de déplacement.

L'événement deactivate est utilisé pour supprimer les valeurs des propriétés CSS de l'élément récepteur et le ramener à son état d'origine dès que l'utilisateur relâche le bouton de la souris. (Cet événement se produit chaque fois que le glissement d'un élément s'arrête, que l'élément déplacé soit laissé ou non sur l'élément récepteur.) Ce processus est illustré dans la figure :

Gestion des éléments qui se chevauchent

La technologie glisser-déposer peut être améliorée en ajoutant une gestion répétée des événements. L'événement de dépassement se produit lorsque 50 % de l'élément déplacé se trouve sur n'importe quelle partie de l'élément récepteur. L'événement out se produit lorsque des éléments qui se chevauchaient auparavant ne se chevauchent plus. Un exemple de réponse à ces événements est donné ci-dessous :

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left") ) , activer : function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), désactiver : function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Exemple d'exécution

Les mêmes fonctions de gestionnaire sont utilisées ici que dans l'exemple précédent, mais dans ce cas, elles sont associées aux événements over et out. Lorsque l'élément récepteur recouvre au moins 50 % de l'élément déplacé, il est encadré et sa couleur de fond change, comme le montre la figure :

Cette limite de 50% est appelée seuil de recouvrement (tolérance), dont la valeur peut être fixée lors de la création de l'élément récepteur, comme cela sera montré ultérieurement.

Configuration des interactions droppables

L'interaction Droppable possède un certain nombre de propriétés que vous pouvez modifier pour personnaliser son comportement. Ces propriétés sont répertoriées dans le tableau ci-dessous :

Propriétés d'interaction droppables Description de la propriété

désactivé	Si cette option est vraie, la fonctionnalité d'interaction Droppable est initialement désactivée. La valeur par défaut est fausse
accepter	Réduit l'ensemble des éléments mobiles auxquels l'élément récepteur répondra. La valeur par défaut est *, qui correspond à n'importe quel élément
classe active	Définit une classe qui sera attribuée en réponse à l'événement activate et supprimée en réponse à l'événement deactivate
hoverClass	Définit une classe qui sera attribuée en réponse à un événement over et supprimée en réponse à un événement out
tolérance	Définit le degré minimum de chevauchement auquel un événement excessif se produit.

Limitation des éléments autorisés à être déplacés

Vous pouvez limiter l'ensemble des éléments droppables qui seront acceptés par un élément doté de la fonctionnalité d'interopérabilité Droppable en utilisant l'option d'acceptation. La valeur de l'option d'acceptation doit être définie sur un sélecteur. Par conséquent, les événements d'interaction Droppable ne se produiront que si l'élément déplacé correspond au sélecteur spécifié. Un exemple correspondant est donné ci-dessous :

... .draggable, #droppable (taille de police : grande ; bordure : fine noir uni ; remplissage : 10px ; largeur : 100px ; alignement du texte : centre ; couleur d'arrière-plan : gris clair ; marge : 4px ;) #droppable (remplissage : 20px; position: absolue; droite: 5px;) $(function() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: function(event, ui) ( ui.draggable.text("Left") ), activer : function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), désactiver : function () ( $("#droppable").css("border", "").css("background-color", ""); ), accepter : "#drag1" )); )); Laissez ici Élément 1 Élément 2 Exemple d'exécution

Dans cet exemple, il y a deux éléments déplaçables avec les ID drag1 et drag2. Lors de la création d'un élément récepteur, nous utilisons l'option accept, avec laquelle nous indiquons que seul l'élément drag1 sera un élément acceptable à déplacer.

Lorsque vous faites glisser l'élément drag1, vous verrez le même effet que dans les exemples précédents. Aux moments appropriés, les événements activate, deactivate, over et out seront déclenchés pour l'élément récepteur. Dans le même temps, si vous faites glisser un élément drag2 qui ne correspond pas au sélecteur spécifié dans le paramètre accept, ces événements ne seront pas déclenchés. Cet élément peut être déplacé librement, mais il ne sera pas perçu par l'élément récepteur.

Notez le changement dans la façon dont nous sélectionnons un élément flottant acceptable sur lequel appeler la méthode text(). Lorsqu'il n'y avait qu'un seul élément mobile dans le document, l'attribut id suffisait pour cela :

Déposez : function() ( $("#draggable").text("Left") ),

Dans cet exemple, il y a deux éléments flottants, et la sélection par l'attribut id ne produira pas le résultat souhaité, puisque le texte dans ce cas changera toujours dans le même élément flottant, quel que soit celui qui est acceptable pour l'élément récepteur.

La solution consiste à utiliser l'objet ui, que jQuery UI fournit comme argument supplémentaire à chaque gestionnaire d'événements. La propriété draggable d'un objet ui renvoie un objet jQuery contenant l'élément que l'utilisateur glisse ou tente de déposer sur l'élément cible, permettant de sélectionner l'élément souhaité comme ceci :

Drop : fonction (événement, ui) ( ui.draggable.text("Left") ),

Modification du seuil de chevauchement

Par défaut, l'événement over se produit uniquement lorsqu'au moins 50 % de l'élément déplacé chevauche l'élément récepteur. Le montant de ce chevauchement de seuil peut être modifié à l'aide de l'option de tolérance, qui peut prendre les valeurs indiquées dans le tableau ci-dessous :

Les deux valeurs que j'utilise le plus souvent sont l'ajustement et le toucher car elles ont le plus de sens pour les utilisateurs. J'utilise fit lorsque l'élément déplacé doit rester dans la zone de l'élément récepteur vers lequel il a été déplacé, et touch lorsque l'élément déplacé doit revenir à sa position d'origine (un exemple sera donné ci-dessous). Un exemple d’utilisation des paramètres fit et touch est donné ci-dessous :

La valeur clone indique à jQuery UI de créer une copie de l'élément en cours de déplacement, ainsi que de tout son contenu, et d'utiliser le résultat résultant comme élément d'assistance. Le résultat est présenté sur la figure :

L'élément assistant est supprimé lorsque l'utilisateur relâche le bouton de la souris sur l'élément en cours de déplacement, laissant l'élément en cours de déplacement et l'élément récepteur dans leurs positions d'origine.

Comme le montre la figure, l'élément d'origine déplacé reste en place et seul l'élément auxiliaire se déplace sur l'écran en suivant le pointeur de la souris. Si la taille de l'élément déplacé est grande, comme dans notre exemple, alors il couvre le reste des éléments du document, de sorte qu'il sera difficile pour l'utilisateur de suivre même la position de l'élément récepteur. Ce problème peut être résolu en fournissant la fonction comme valeur de l'option d'assistance, comme le montre l'exemple ci-dessous :

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass : "active", hoverClass : "hover" )); )); ...Exécuter l'exemple

Lorsque l'utilisateur commence à faire glisser un élément, jQuery UI appelle la fonction spécifiée par le paramètre helper et utilise l'élément renvoyé comme objet à faire glisser. Dans ce cas, j'utilise jQuery pour créer l'élément img. Le résultat est présenté sur la figure :

Une petite image agit comme un proxy pour l'élément en cours de déplacement, ce qui facilite grandement le suivi des autres éléments du document.

L'objet ui que jQuery UI transmet aux événements d'interaction Droppable contient une propriété d'assistance, et cette propriété peut être utilisée pour manipuler l'assistance lors de son déplacement. Un exemple d'utilisation de cette propriété en conjonction avec les événements over et out est donné ci-dessous :

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Ici, les événements over et out et la propriété ui.helper sont utilisés pour afficher une bordure autour de l'élément helper lorsqu'il chevauche l'élément récepteur. Le résultat est présenté sur la figure :

Accrocher aux bords des éléments

Grâce à l'option d'accrochage, vous pouvez vous assurer que l'élément déplacé est « attiré » par les bords des éléments à côté desquels il passe. Cette option accepte un sélecteur comme valeur. L'élément en cours de déplacement s'alignera sur les bords de tout élément correspondant au sélecteur spécifié. Un exemple d'utilisation de l'option snap est donné ci-dessous :

Exécutez l'exemple d'interface utilisateur jQuery #snapper, .draggable, .droppable (taille de police : grande ; bordure : noir uni moyen ; remplissage : 4 px ; largeur : 150 px ; alignement du texte : centre ; couleur d'arrière-plan : gris clair ; marge inférieure : 10 px ;).droppable (marge-droite : 5px ; hauteur : 50px ; largeur : 120px) #dropContainer (position : absolue ; droite : 5px ;) div span (position : relative ; haut : 25%) .droppable.active (bordure : vert uni moyen) .droppable.hover (couleur d'arrière-plan : vert clair) #snapper (position : absolue ; gauche : 35 % ; bordure : noir uni moyen ; largeur : 180 px ; hauteur : 50 px) $(function() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "both", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "survoler" )); )); Panier Cliquez ici Faites-moi glisser

Lorsqu'un élément mobile s'approche de l'un des éléments appropriés, il est pour ainsi dire « attiré » vers lui de telle manière que leurs bords adjacents se touchent. Pour une telle liaison, vous pouvez sélectionner n'importe quel élément, pas seulement l'élément récepteur. Dans cet exemple, j'ai ajouté un élément div et défini l'option snap sur une valeur qui sélectionne cet élément ainsi que l'élément récepteur dans le document.

Il existe quelques options d'assistance qui vous permettent de personnaliser plus précisément le comportement d'ancrage des éléments. L'une d'elles est l'option snapMode. Avec son aide, vous pouvez spécifier le type de liaison. Les valeurs suivantes sont autorisées : intérieur(accrochage aux bords intérieurs des éléments), extérieur(accrochage aux bords extérieurs des éléments) et les deux(accrochage à tous les bords ; valeur par défaut).

L'option snapTolerance vous permet de spécifier jusqu'où l'élément flottant doit s'approcher du bord de l'élément cible avant que l'accrochage ne se produise. La valeur par défaut est 20, ce qui signifie 20 pixels. L'exemple utilise une valeur de 50, qui correspond à un accrochage à une plus grande distance. Il est très important de choisir la bonne valeur pour cette option. Si la valeur snapTolerance est trop faible, l'utilisateur risque de ne pas remarquer l'effet d'accrochage, et si elle est trop élevée, l'élément déplacé commencera à faire des sauts inattendus, s'alignant sur des éléments distants.

Récemment, j'ai eu l'idée de commencer à développer un jeu pour Android. Pour commencer, j'ai décidé d'écrire les échecs. Il m'a semblé que la technologie Drag and Drop serait parfaite pour mettre en œuvre le mécanisme de déplacement des figures. Pour les non-initiés, je note que la méthode glisser-déposer est la possibilité de faire glisser un objet graphique sur un autre et d'effectuer l'une ou l'autre action après l'avoir relâché. L'exemple le plus simple consiste à supprimer un raccourci du bureau de votre PC en le faisant glisser vers la corbeille. En « jetant » l’étiquette à la poubelle, on indique au système que l’on veut forcer ces deux objets à interagir. Le système reçoit notre signal et décide quelle action il doit entreprendre. Le glisser-déposer s'est répandu en raison de sa clarté intuitive. Cette approche s'appuie sur notre expérience d'interaction avec des objets du monde réel et fonctionne très bien dans un environnement virtuel. Quant aux échecs, par glisser-déposer, il est technologiquement plus facile de déterminer la cellule dans laquelle l'utilisateur a fait glisser la pièce, car il n'est pas nécessaire de calculer le numéro de cellule à partir des coordonnées du point de lancement. Ce travail sera repris par la machine virtuelle.

Objectifs de l'utilisation de la technologie Drag n Drop

L'utilisation de la technologie glisser-déposer me permet de résoudre trois problèmes avec peu d'effort :

Visualisation des progrès. Lorsque l'utilisateur touche une forme et commence à la déplacer sur l'écran, la forme est remplacée par un motif plus petit. Ainsi, l'utilisateur comprend que le chiffre est capturé.

J'ai limité la zone de mouvement de la figurine à la taille de la planche.

Si l'utilisateur relâche une pièce au mauvais endroit, elle doit revenir à sa position d'origine.

Les tâches ont été définies, commençons à les mettre en œuvre.

Substitution ImageView au toucher

Toutes mes formes sont des objets ImageView. Malheureusement, il s'est avéré que l'implémentation du Drag & Drop dans Android ne permet pas « directement » de remplacer l'image d'un objet lorsqu'il est touché. Cependant, cette tâche peut être entièrement résolue à l'aide de l'API. Nous devrons effectuer un certain nombre d'étapes simples :

Créez un objet DragShadowBuilder.

Appelez la méthode startDrag.

Masquez notre ImageView, qui affiche la forme, en appelant la méthode setVisibility avec le paramètre View.INVISIBLE. De ce fait, seul l'objet DragShadowBuilder restera à l'écran, ce qui signalera à l'utilisateur que la forme a été capturée.

Ces actions doivent être implémentées dans le gestionnaire OnTouchListner de l'objet ImageView. Pour ce faire, remplaçons la méthode onTouch :

@ Remplacer public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder dsb= new View. DragShadowBuilder (view) ; view. startDrag(clipData, dsb, view, 0 ) ; view. setVisibility(View. INVISIBLE) ; return true ; ) else ( return false ; ) )

Tout est très simple. Nous avons donc réglé la substitution d'image, passons à la tâche suivante.

Limitation de la zone de glisser pour la fonction glisser-déposer

Il y a un problème avec la limitation de la zone de traînée. Le fait est que si vous relâchez une pièce en dehors du plateau, l'événement de chute ne se produira pas, puisque l'utilisateur a relâché l'objet dans un espace vide et qu'il n'y a rien avec lequel l'objet puisse interagir. En conséquence, la figurine ne reviendra pas à son état d’origine et restera cachée pour toujours. J'ai passé beaucoup de temps à lire la documentation, mais je n'ai toujours pas trouvé de moyen de limiter la zone de glisser-déposer des objets. L’idée est venue soudainement. Je n'ai pas du tout besoin de limiter la zone, j'ai besoin de savoir si l'utilisateur a libéré la forme correctement ou non.

Détermination de la version correcte
J'ai trouvé des réponses à mes questions dans la section « Gestion des événements de fin de glissement » sur le site Web des développeurs Android. Voici quelques points clés :

Lorsque l'utilisateur termine le glissement, l'événement ACTION_DRAG_ENDED est généré dans le gestionnaire DragListeners.

Dans DragListener, vous pouvez obtenir des informations plus détaillées sur l’opération de glisser en appelant la méthode DragEvent.getResult().

Si DragListener renvoie true en réponse à l'événement ACTION_DROP, l'appel à getResult renverra également true, sinon il renverra false.

Je dois donc intercepter l'événement ACTION_DRAG_ENDED et appeler la méthode getResult. S'il renvoie false, alors l'utilisateur a fait glisser la pièce hors du tableau et je dois définir ImageView en mode visible.

@ Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent. ACTION_DROP& amp;& amp; containDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) private boolean dropEventNotHandled(DragEvent dragEvent) ( return ! dragEvent. getResult( ) ; )

Désormais, l'utilisateur peut libérer la figurine n'importe où et rien de grave ne se produira.

Définition des coups valides

La dernière partie de l'article est consacrée à la vérification de la validité du mouvement que l'utilisateur tente d'effectuer. Avant d'aborder ce sujet en détail, je ferai une courte note expliquant la structure de ma candidature. L'échiquier est représenté comme un TableLayout, et chaque cellule est un enfant d'un LinearLayout et possède un OnDragListener.

De plus, chaque OnDragListener fait référence à un objet « médiateur », qui s'occupe de l'interaction des objets du jeu et mémorise la position de la cellule actuelle.

Lorsque l'utilisateur fait glisser un élément sur une cellule, les actions suivantes sont possibles :

Utilisation de l'événement ACTION_DRAG_ENTERED pour définir la variable « containsDraggable » sur true.

Utilisation de l'événement ACTION_DRAG_EXITED pour définir la variable « containsDraggable » sur false.

Utiliser l'événement ACTION_DROP pour demander au médiateur s'il est acceptable de placer une pièce dans cette cellule.

Vous trouverez ci-dessous le code qui implémente la logique décrite

@ Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent.ACTION_DROP& amp;& amp; containDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )

Comme vous pouvez le voir, que le déplacement soit valide ou non, ImageView est transféré à l'état visible. Je voulais que l'utilisateur voie la forme bouger. J'ai mentionné plus tôt qu'une cellule est un enfant de LayoutView. Ceci est fait pour faciliter le déplacement de l'ImageView d'une cellule à l'autre. Vous trouverez ci-dessous le code de la méthode checkForValidMove, qui montre comment ImageView se déplace.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup propriétaire = (ViewGroup) dragView. getParent() ; propriétaire. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity. CENTER) ; view. showAsLanded() ; mediator. handleMove(view) ; ) )

J'espère que cet article vous aidera lors du développement de vos propres projets.

Il est plus facile de prendre quelque chose et de le déposer que d’écrire ce qui doit être pris et où le mettre. Bien sûr, sans souris ou appareil similaire, vous ne pouvez rien sélectionner ni spécifier quoi que ce soit, 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 ne concerne pas seulement les magasins en ligne, les bibliothèques électroniques, les systèmes de recherche ou d'information, mais également le domaine appliqué. L'idée est très applicable au développement de sites Web 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électionner, déplacer et placer - l'idée est naturelle et pratique. Il est tout simplement surprenant qu’elle ne soit pas née au moment où la souris est devenue un accessoire informatique indispensable.

L’exemple le plus évident est le choix d’un produit dans une boutique en ligne. Prendre le produit souhaité avec votre souris et le glisser dans le panier est simple, naturel et pratique. Télécharger des fichiers : sortir un document de la fenêtre du navigateur et le placer sur un élément de page, déclenchant ainsi le transfert du document vers le serveur, est également une idée pratique.

Pour un développeur, l'idée du « glisser-déposer » est de manipuler les é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, ainsi que de déplacer les côtés des balises de bloc.

HTML et CSS sont d'excellents langages pour décrire les balises et les styliser, mais lorsqu'un développeur a la possibilité de manipuler de manière interactive les éléments de la 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 : choisi, transféré et publié - simple et naturel.

Il est très simple de mettre en œuvre un transfert de fichiers d'une page vers une page, vers un serveur ou pour tout autre usage.

Dans cet exemple, plusieurs fichiers du bureau ont été sélectionnés avec la souris (figure de gauche). Lors de la sélection, le bouton gauche de la souris a été enfoncé et la personne sélectionnée « est allée » dans le 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 autour de lui.

Lorsque la souris était sur le panier, le visiteur relâchait le bouton gauche de la souris, l'événement « glisser-déposer » avait lieu et sur la page du site (image du bas) le code JavaScript était capable de recevoir et de traiter tous les fichiers fournis par le visiteur. à la page (site).

Description de l'implémentation

Le code qui effectue cette procédure est très simple. Même un développeur novice peut le répéter dans n'importe quel cas d'utilisation.

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

La logique de la page est la suivante. Lorsqu'une page est chargée dans le navigateur, le gestionnaire d'événements « ondrop » est affecté au panier - put, les autres événements sont bloqués et non utilisés.

La page fonctionne comme d'habitude, mais dès que le visiteur sélectionne un ou plusieurs fichiers et les fait glisser vers l'image du panier, c'est-à-dire vers la balise scPlaceFile, le traitement de l'événement « les fichiers sont arrivés » sera déclenché.

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 avec les données reçues est déterminé par le développeur, dans ce cas, une liste des fichiers reçus est simplement générée.

Après traitement, l'événement est bloqué et n'est pas propagé. Ceci est nécessaire pour que le navigateur ne se livre pas à des activités amateurs 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 l'utilisation de cette technologie. Généralement, le développeur crée un formulaire de téléchargement de fichiers (1) qui fonctionne comme d'habitude (2). Le visiteur peut sélectionner des fichiers et les télécharger comme d'habitude.

Cependant, si un visiteur glisse et dépose un endroit précis sur le formulaire, le champ du nom du ou des fichiers sera renseigné automatiquement.

C'est une bonne décision. Il est bien sûr très difficile d’admettre qu’il n’y a pas de souris sur un ordinateur. Mais il est préférable de développer l'interface utilisateur dans la version 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. Le « glisser-déposer » peut être mis en œuvre non seulement à l'aide de moyens standards, mais également en traitant les événements de la 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. Le calcul manuel est une bonne pratique, mais l'option interactive est plus pratique. Toutes les balises ont toujours une forme rectangulaire et, en suivant les événements « souris » sur les côtés des éléments, vous pouvez créer la possibilité de déplacer automatiquement les éléments vers l'emplacement souhaité sur la page, ou de les modifier.

Gestion de l'événement de clic de 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 dans la direction souhaitée. 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.

Formellement, il ne s’agit pas de « 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 pour mettre en œuvre l'interface utilisateur (visiteur, développeur). L’exigence de compatibilité entre navigateurs est tout à fait naturelle et moderne.

Tout cela ensemble rend la création de pages plus difficile, mais en appliquant l'idée du « glisser-déposer » dans sa forme standard, en utilisant ses événements, en combinant cette idée avec des événements ordinaires sur les éléments, il est possible d'implémenter un mécanisme dans quelle création de page se fera visuellement.

Voyons maintenant la sélection d'un ou plusieurs éléments. Le fait de la sélection est l'apparition d'un menu contextuel, par exemple, le but est d'aligner les éléments sélectionnés (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 recalcul manuel. Moins d’erreurs signifient que l’objectif est atteint plus rapidement. De plus, vous pouvez créer une page dans un navigateur, en enregistrant la position et la taille des éléments. En ouvrant cette page sur votre smartphone, vous pouvez corriger les coordonnées et les dimensions et les mémoriser pour un modèle de smartphone ou une version de navigateur spécifique.

Ainsi, la même page, sans se conformer manuellement aux exigences multi-navigateurs, affichera différentes données sur différents appareils et dans différents navigateurs.

En permettant au visiteur d'effectuer ces procédures de manière indépendante, ainsi que de sélectionner les éléments de page nécessaires parmi ceux fournis par le développeur, il est possible de garantir la compatibilité entre navigateurs et la fonctionnalité requise de la page, en tenant compte de l'opinion de l'utilisateur.

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 droppableélément et déposez-les en relâchant le bouton de la souris. Une représentation translucide du déplaçable Les éléments suivent 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 feedback déplaçableéléments produisent, et le droppableé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.

Faites glisser les événements L'événement sur le gestionnaire d'événements se déclenche lorsque…

traîner	glisser	…un élément déplacé(élément ou sélection de texte) est déplacé.
dragende	ondragend	…Une opération de glisser se termine (par exemple en relâchant un bouton de la souris ou en appuyant sur la touche Échap ; voir Terminer un glisser .)
draguer	ondrager	…un élément glissé entre dans une cible de dépôt valide. (Voir Spécification des cibles de dépôt.)
dragexit	ondragesortie	…un élément n'est plus la cible de sélection immédiate de l'opération de glissement.
glisser	ondragleave	…un élément glissé 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.)
baisse	ondrop	…un élément est déposé sur une cible de dépôt valide. (Voir Effectuer un drop.)

Remarque : Ni les événements dragstart ni dragend ne sont déclenchés lorsque vous faites glisser un fichier dans le navigateur depuis le système d'exploitation.

Interfaces Les bases

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

Identifiez ce qui est déplaçable

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

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

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

Pour plus d'informations, voir :

Gérer la chute effet

Le gestionnaire de l'événement drop est libre de traiter les données de glisser 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 déplacés, puis les traiter en conséquence. De plus, la sémantique de l'application peut différer en fonction de 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 : le récepteur et la source. Le récepteur est l'objet qui recevra l'objet source (l'objet en cours de déplacement).

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

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

SurDragOver(tapez TDragOverEvent) - crée un objet récepteur lorsqu'un objet glissé se trouve dessus. Paramètres transmis au gestionnaire d'événements : objet récepteur Sender (type TObject), objet source Source (type TObject), état de mouvement State (type TDragState), X et Y (type integer) - coordonnées actuelles du pointeur de la souris, Accept ( tapez boolean ) signe de confirmation de l’opération de déplacement. L'état de mouvement indique clairement si l'objet déplacé se trouve dans la zone de réception, s'y déplace ou s'il l'a quitté. Les paramètres transmis permettent à l'objet de destination 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, sinon il est défini sur False.

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

onEndDrag (type EndDragEvent) : déclenché lorsqu'une opération de glissement est terminée. Les coordonnées X et Y du point où l'objet Sender source et l'objet Target récepteur 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 glisser, la méthode BeginDrag, doit être codé par le programmeur.

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

Procédure TForm1.FormDragOver(Expéditeur, Source : TObject ; X, Y : Integer ; État : TDragState ; var Accept : Boolean) ; commencer si Source = Panel1 alors Accepter := Vrai sinon Accepter := Faux ; fin; procédure TForm1.FormDragDrop(Expéditeur, Source : TObject ; X, Y : Integer) ; commencer Panel1.Left:= X; Panneau1.Top := Y ; fin;

Maintenant, en lançant l'application et en cliquant sur le bouton de la souris au-dessus du 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 je l'ai utilisé dans la pratique.