Création d'une interface HTML5 simple « glisser-déposer ». Glisser-déposer : un moyen d'exploiter les éléments de l'interface utilisateur 13 Technologie glisser-déposer

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 outils de glisser-déposer natifs similaires. 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 délai 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 noire unie ; remplissage : 10 px ; largeur : 100 px ; 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 à déplacer, et la sélection par attribut id ne donnera pas résultat désiré, 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 celui de réception. 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.

Les techniques de glisser-déposer ont évolué au fil des années. Il n'est pas surprenant qu'avec le nombre croissant de programmeurs développant des plugins open source code source(par exemple, pour jQuery), les anciennes méthodes sont réactivées. La bibliothèque JavaScript est très réactive et offre de nombreuses améliorations à l'ère de la technologie Web.

Dans ce didacticiel, nous allons créer un script que vous pourrez utiliser pour créer des rectangles dynamiques de glisser-déposer sur votre site Web. Le processus est géré par jQuery. De tels scripts permettent de gagner du temps en fournissant des fonctionnalités prêtes à l'emploi ! Et la bibliothèque glisser-déposer peut être utilisée dans d'autres projets.

Préparation du contenu

Tout d’abord, préparons un petit site Web pour le projet. Dans le dossier du projet, vous devez créer deux répertoires portant les noms notables "js" et "css" et fichier vide index.html. Le code sera très simple, de sorte qu'il y ait une idée claire du travail et qu'il y ait un point pour un développement ultérieur.

Ci-dessous le code de notre Fichier HTML. Au chapitre tête nous incluons 3 scripts. Le script jQuery principal sera chargé depuis le serveur Google Code. notre fichier de style style.css est également inclus, qui contient les principales propriétés de formation apparence notre document.

Traîne-moi Oui, oui. Exactement moi. Vous pouvez aussi me faire glisser ( zIndex : 200, opacité : .9 )

P.S. : vous pouvez me laisser n'importe où !

Section intérieure corps seuls deux blocs sont placés div, qui contiennent les deux rectangles. Le code est assez simple et compréhensible. À l'intérieur de chaque rectangle se trouvent des en-têtes avec les classes handler et handler2 . Ceci est important car chaque rectangle se comporte différemment lorsque vous faites glisser.

Installation de CSS

Le code HTML est très simple. Si vous comprenez le balisage de base, alors Styles CSS ne présentera également aucune difficulté. Ce sont principalement les marges, les remplissages et les couleurs qui sont déterminés.

Corps, html ( famille de polices : Calibri, sans-serif ; arrière-plan : #eaf3fb ; taille de police : 12 px ; hauteur : 1000 px ; hauteur de ligne : 18px ; ) p ( hauteur : 30px ; )

Sélecteurs corps,html sont utilisés uniquement pour la page de démonstration. Et tout le contenu est placé dans deux rectangles déplaçables.

Dv1 ( largeur : 200 px ; couleur d'arrière-plan : #eff7ff ; bordure : 1 px solide #96c2f1 ; position : absolue ; gauche : 100 px ; haut : 100 px ; ) .dv1 h2 ( couleur d'arrière-plan : #b2d3f5 ; remplissage : 5 px ; police- famille : Géorgie, "Times New Roman", Times, serif ; taille de police : 1.0em ; transformation de texte : majuscules ; poids de police : gras ; couleur : #3a424a ; marge : 1px ; curseur : déplacer ; ) .dv1 div ( remplissage : 5 px ; marge inférieure : 10 px ; ) .dv2 ( couleur d'arrière-plan : #f6ebfb ; bordure : 1 px solide #a36fde ; largeur : 550 px ; position : absolue ; curseur : déplacement ; gauche : 400 px ; haut : 230 px ; ) .dv2 h2 ( couleur d'arrière-plan : #eacfe9 ; espacement des lettres : -0,09 em ; taille de police : 1,8 em ; poids de police : gras ; remplissage : 15 px ; marge : 1 px ; couleur : # 241f24 ; curseur : déplacer ; ) .dv2 .content2 ( remplissage : 5 px ; marge inférieure : 10 px ; )

Pour les deux classes .dv1 et .dv2, nous utilisons le positionnement absolu. Ce n'est pas nécessaire et probablement pas le plus La meilleure façon pour positionner les rectangles déplaçables. Cependant, pour notre exemple, ce positionnement a du sens, puisqu'à chaque rafraîchissement de la page, les rectangles sont installés à certains endroits.

De plus, les polices et les couleurs sont différentes pour les rectangles afin de permettre de voir plus facilement la différence.

Sinon, les titres et le contenu des blocs sont quasiment identiques. Si vous copiez des styles dans votre projet, modifiez les noms avant de commencer. Dans certains cas, il est plus judicieux d'utiliser des identifiants plutôt que des classes, par exemple lors de l'utilisation de la technique du glisser-déposer pour un bloc spécifique.

Analyse JavaScript

Deux fichiers JavaScript contiennent tout le code nécessaire à son fonctionnement. Nous omettrons les détails du travail avec jQuery, car cela dépasse le cadre de la leçon. Faisons attention au fichier jquery.dragndrop.js.

La ligne 22 définit la fonction Drags.

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex : 20, opacité : .7, gestionnaire : null, onMove : function() ( ), onDrop : function() ( ) ), opte );

Ceci définit la variable de retour et les données d'initialisation pour Traînées. Cette méthode est très couramment utilisée lorsque vous travaillez avec jQuery pour transmettre des options à d'autres fonctions. En interne, nous définissons des variables pour tout le monde Options disponibles pour les rectangles déplaçables.

Le morceau de code suivant inclut des gestionnaires d'événements pour la variable dragndrop. Les deux événements traîner Et baisse appeler des fonctions en leur transmettant des paramètres d'événement. Ces événements se produisent lorsque vous appuyez sur le bouton de la souris pour faire glisser un objet, puis le relâchez.

Var dragndrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( gauche : dragData.left + e.pageX - dragData.offLeft, haut : dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( curseur: "move" )); dragData.target.css (( curseur: "move" )); dragData.onMove(e); ), drop: function( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opacity": "" )); dragData.handler.css("cursor", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )

Nos fonctions manipulent le positionnement CSS de chaque objet. Changer le positionnement absolu de vos objets n'affectera pas le fonctionnement de votre code, puisque chaque fonction JavaScript modifie le style défini pour l'objet.

Le reste du code vérifie le gestionnaire et apporte des modifications cosmétiques aux autres styles. Ici, vous pouvez ajouter des modifications à la transparence, à la police et à la couleur de la police, ou ajouter de nouveaux paragraphes.

Fonctions glisser/déposer

Le deuxième fichier fn.js contient du code très simple. Nous attendons que le document soit complètement chargé, après quoi nous appelons nos fonctions. Deux instances de la fonction sont définies Traînées, dont nous avons parlé plus tôt.

Nous avons deux blocs mobiles avec les classes .dv1 et .dv2 . Si vous devez laisser un bloc mobile, il vous suffit de supprimer la deuxième partie du code. L'ajout d'un autre bloc mobile est également simple. Il vous suffit d'ajouter nouvelle fonctionnalité dans ce fichier.

La première étape consiste à définir les options lors de l’appel de la fonction. Assurez-vous de définir le nom du gestionnaire. Avec lui, nous indiquons à jQuery quel gestionnaire utiliser lorsque le bouton de la souris est enfoncé dans une certaine zone du document. Le nom du gestionnaire peut être une classe ou un attribut ID.

Notre première fonction possède deux gestionnaires d'événements, onMove et onDrop. Les deux appellent de nouvelles fonctions qui sont transmises à l'événement en cours sous forme de variables. C'est ici que le code HTML dans le rectangle est manipulé pour se mettre à jour à chaque mouvement. C'est un excellent effet pour démontrer comment vous pouvez contrôler un processus à l'aide d'événements jQuery simples.

Dans la deuxième fonction, nous utilisons les paramètres z-Index et opacity. Pouvez-vous ajouter d'autres propriétés CSS ? mais cela nécessitera de retravailler le code JavaScript pour que les paramètres soient vérifiés. Par exemple, vous pouvez transmettre un style de police ou des valeurs différents pour la hauteur et la largeur d'un rectangle en mouvement - une astuce très intéressante !

Conclusion

Avec un peu de travail, nous disposons désormais d’une excellente interface glisser-déposer. jQuery offre d'énormes avantages aux développeurs désireux d'utiliser d'anciennes méthodes dans leurs projets.

En conséquence, nous disposons non seulement de fonctions de gestionnaire d’événements, mais nous pouvons également transmettre de nouvelles variables à des blocs déplaçables. Cela ouvre de nouvelles possibilités de créativité. La démonstration de la leçon ne contient qu'un aperçu de ce qui peut être fait en utilisant un tel code.

Consultez donc la documentation jQuery pour utiliser les fonctions de la bibliothèque.

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 se limite pas aux boutiques en ligne, aux bibliothèques électroniques, aux moteurs de recherche ou Systèmes d'information, ainsi que la sphère appliquée. 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.

Ce 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. Vous pouvez implémenter le « glisser-déposer » non seulement moyens standards, mais aussi en traitant 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. 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

Souris sur l'ordinateur et doigts sur le smartphone - absolument différentes approchesà la mise en place de 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 des données différentes sur divers appareils et dans divers 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.

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.