One place for hosting & domains

      créer

      Comment créer un effet parallaxe avec défilement en pure CSS


      Introduction

      La technologie CSS moderne constitue un outil puissant que vous pouvez utiliser pour créer de nombreuses fonctionnalités d’interface utilisateur (UI) avancées. Auparavant, ces caractéristiques reposaient sur des bibliothèques JavaScript.

      Au cours de ce guide, vous allez configurer quelques lignes de CSS pour créer un effet scrolling parallax sur une page Web. Vous utiliserez des images de placekitten.com comme images de balise d’arrière-plan.

      Une fois que vous aurez fini ce tutoriel, vous aurez une page Web avec un effet parallaxe avec défilement en pure CSS.

      Avertissement : les propriétés expérimentales de CSS utilisées dans cet article ne fonctionnent pas sur tous les navigateurs. Ce projet a été testé et fonctionne sur Chrome. Cette technique ne fonctionne pas correctement avec Firefox, Safari et iOS, en raison de certaines optimisations de ces navigateurs.

      Étape 1 — Création d’un nouveau projet

      Pour cette étape, utilisez la ligne de commande afin de configurer un nouveau dossier de projet et des fichiers. Pour commencer, ouvrez votre terminal et créez un nouveau dossier de projet.

      Saisissez la commande suivante pour créer le dossier de projet :

      Pour cet exercice, appelez le dossier css-parallax. Maintenant, passez dans le dossier css-parallax :

      Ensuite, créez un fichier index.html dans votre dossier css-parallax avec la commande nano suivante :

      Placez l'intégralité du HTML du projet dans ce fichier.

      Au cours de la prochaine étape, vous allez commencer à créer la structure de la page Web.

      Étape 2 — Configuration de la structure de l'application

      Au cours de cette étape, vous allez ajouter le HTML dont vous avez besoin pour créer la structure du projet.

      Ajoutez le code suivant dans votre fichier index.html :

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Il s'agit de la structure de base de plupart des pages Web qui utilisent HTML.

      Ajoutez le code suivant dans la balise <body> :

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Ce code crée trois sections différentes. Deux auront une image en arrière-plan et l'autre aura un arrière-plan statique.

      Au cours des étapes suivantes, vous allez ajouter les styles de chaque section en utilisant les catégories que vous avez ajoutées dans le HTML.

      Étape 3 — Création d'un fichier CSS et ajout du CSS initial

      Au cours de cette étape, vous allez créer un fichier CSS. Ensuite, vous allez ajouter le CSS initial dont vous avez besoin pour formater le site Web et créer l'effet de parallaxe.

      Tout d'abors, créez un fichier styles.css dans votre dossier css-parallax avec la commande nano suivante :

      C'est là que vous allez mettre tout le CSS dont vous avez besoin pour créer l'effet parallaxe avec défilement.

      Ensuite, commencez par la catégorie .wrapper. Ajoutez le code suivant dans votre fichier styles.css :

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      La catégorie .wrapper configure les propriétés de perspective et de défilement sur toute la page.

      Pour que l'effet fonctionne, la hauteur de l'habillage doit être configurée sur une valeur fixe. Vous pouvez utiliser l'unité de visualisation vh configurée sur 100 pour obtenir la pleine hauteur de visualisation à l'écran.

      Lorsque vous dimensionnez les images, une barre de défilement horizontale apparaîtra à l'écran. Donc, vous pouvez la désactiver en ajoutant overflow-x: hidden;. La propriété perspective simule la distance de l'unité de visualisation aux pseudo-éléments que vous allez créer et continuer à transformer dans le CSS.

      Au cours de l'étape suivante, vous allez ajouter plus de CSS pour formater votre page Web.

      Étape 4 — Ajout des styles pour la catégorie .section

      Au cours de cette étape, vous allez ajouter des styles à la catégorie .section.

      À l'intérieur de votre fichier styles.css, ajoutez le code suivant en dessous de la catégorie de l'habillage :

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      La catégorie .section définit les propriétés de taille, d'affichage et de texte des principales sections.

      Configurez la position sur relative pour que l'enfant .parallax::after puisse être exactement positionné par rapport à l'élément parent .section.

      Chaque section dispose d'une view-height(vh) de 100 pour prendre en charge la pleine hauteur de l'unité de visualisation. Vous pouvez modifier et configurer cette valeur comme bon vous semble pour chaque section.

      Enfin, les autres propriétés de CSS permettent de formater et d'ajouter un style au texte dans chaque section. Elles vous permettent de positionner le texte au centre de chaque section et d'ajouter une couleur : white.

      Ensuite, vous allez ajouter un pseudo-élément et le formater pour créer l'effet parallaxe sur deux des sections de votre HTML.

      Étape 5 — Ajout de styles pour la catégorie .parallax

      Au cours de cette étape, vous allez ajouter des styles à la catégorie .parallax.

      Tout d'abord, vous allez ajouter un pseudo-élément dans la catégorie .parallax à formater.

      Remarque : vous pouvez consulter les docs web de MDN pour en savoir plus sur les pseudo-éléments de CSS.

      Ajoutez le code suivant sous la catégorie .section :

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      La catégorie .parallax ajoute un pseudo-élément ::after à l'image d'arrière-plan et procède aux transformations nécessaires pour l'effet parallaxe.

      Le pseudo-élément est le dernier enfant de l'élément ayant la catégorie .parallax.

      La première moitié du code affiche et positionne le pseudo-élément. La propriété transform écarte le pseudo-élément de la caméra sur z-index, puis elle le rééchelonne pour remplir l'unité de visualisation.

      Comme le pseudo-élément se trouve plus loin, il semble se déplacer plus lentement.

      Au cours de la prochaine étape, vous allez ajouter les images de l'arrière plan et le style de l'arrière-plan statique.

      Étape 6 — Ajout des images et de l'arrière-plan pour chaque section

      Au cours de cette étape, vous allez ajouter les dernières propriétés de CSS pour intégrer les images d'arrière-plan et la couleur de fond de la section statique.

      Tout d'abord, ajoutez une couleur de fond unie à la section .static en utilisant le code suivant après la catégorie .parallax::after :

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      La catégorie .static ajoute un arrière-plan à la section statique qui n'a pas d'image.

      Les deux sections portant la catégorie .parallax disposent également d'une catégorie supplémentaire qui est différente pour chacune d'elles. Utilisez les classes .bg1 et .bg2 pour ajouter les images d'arrière-plan de chatons.

      Ajoutez le code suivant à la catégorie .static :

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Les catégories .bg1, .bg2 ajoutent les images d'arrière-plan correspondant à chaque section.

      Les images proviennent du site web placekitten. Il s'agit d'un service qui met à disposition des photos de chatons que vous pouvez utiliser en tant que supports de présentation.

      Maintenant que tout le code de l'effet parallaxe avec défilement est ajouté, vous pouvez le lier à votre fichier styles.css dans votre index.html.

      Étape 7 — Liaison de styles.css et ouverture de index.html dans votre navigateur

      Au cours de cette étape, vous allez lier votre fichier styles.css et ouvrir le projet dans votre navigateur pour voir l'effet parallaxe avec défilement.

      Tout d'abord, ajoutez le code suivant à la balise <head> dans le fichier index.html :

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Maintenant, vous pouvez ouvrir votre fichier index.html dans votre navigateur :

      GIF illustrant l'effet parallaxe avec défilement

      C'est fait, vous avez configuré une page web avec un effet de défilement qui fonctionne. Consultez ce référentiel GitHub pour voir le code complet.

      Conclusion

      Grâce à cet article, vous avez configuré un projet avec un fichier index.html et styles.css et vous disposez maintenant d'une page Web fonctionnelle. Vous y avez ajouté la structure de votre page Web et créé les styles des diverses sections du site.

      Vous pouvez éloigner les images ou l'effet parallaxe que vous utilisez pour qu'ils se déplacent plus lentement. Il vous faudra modifier la quantité de pixels sur perspective et les propriétés transform. Si vous ne souhaitez pas que l'image d'arrière-plan défile, utilisez background-attachment: fixed; au lieu de perspective/translate/scale.



      Source link

      Comment créer un nouvel utilisateur et octroyer des autorisations dans MySQL


      Introduction

      MySQL est un logiciel de gestion de base de données open-source qui aide les utilisateurs à stocker, organiser et récupérer des données. Un vaste éventail d’options est disponible pour octroyer les autorisations adaptées à des utilisateurs spécifiques dans les tables et les bases de données. Ce tutoriel vous donnera un bref aperçu de quelques-unes des nombreuses options disponibles.

      Qu’est-ce que Highlights signifie ?

      Au cours de ce tutoriel, toutes les lignes que l’utilisateur devra saisir ou personnaliser seront highlighted (mises en surbrillance) ! Le reste devra essentiellement être saisi via du copier-coller.

      Dans la partie 1 du tutoriel MySQL, nous avons procédé à des modifications dans MySQL en tant que root user avec un accès complet à toutes les bases de données. Cependant, dans les cas où vous auriez besoin de configurer des restrictions supplémentaires , il existe des moyens de créer des utilisateurs avec des autorisations personnalisées.

      Commençons par créer un nouvel utilisateur dans le shell MySQL :

      • CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';

      Remarque : lorsque nous ajouterons des utilisateurs dans le shell MySQL au cours de ce tutoriel, nous indiquerons que l’hôte de l’utilisateur est localhost et non l’adresse IP du serveur. localhost est un nom d’hôte qui signifie « cet ordinateur ». MySQL traite tout particulièrement ce nom d’hôte spécifique : lorsqu’un utilisateur avec cet hôte se connecte sur MySQL, il tentera de se connecter au serveur local en utilisant un fichier de socket Unix. Par conséquent, de manière générale, vous pouvez utiliser localhost si vous prévoyez de vous connecter à votre serveur en SSH ou exécuter le client mysql local pour vous connecter au serveur MySQL local.

      À ce stade, newuser n’a aucune autorisation et ne peut rien faire sur les bases de données. En effet, même si newuser tente de se connecter (avec le mot de passe password), il ne pourra pas atteindre le shell MySQL.

      Par conséquent, la première chose à faire consiste à donner accès à l’utilisateur aux informations dont il a besoin.

      • GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';

      Les astérisques de cette commande renvoient à la base de données et à la table (respectivement) auxquelles ils peuvent accéder. Cette commande spécifique permet à l’utilisateur de lire, modifier, exécuter et effectuer toutes tâches sur l’intégralité des bases de données et des tables.

      Notez que, dans cet exemple, nous accordons à newuser un total accès root à tout ce qui se trouve dans notre base de données. Bien que cela soit utile pour expliquer certains concepts MySQL, il se peut que cette méthode soit impraticable sur la plupart des cas d’utilisation et expose votre base de données à d’importants risques de sécurité.

      Une fois que vous en aurez fini avec les autorisations que vous souhaitez configurer pour vos nouveaux utilisateurs, veillez à toujours recharger tous les privilèges.

      Maintenant, vos modifications ont pris effet.

      Voici une courte liste des autres autorisations possibles couramment utilisées que vous pouvez octroyer aux utilisateurs.

      • ALL PRIVILEGES : comme nous l'avons vu précédemment, cela donne à l'utilisateur de MySQL un total accès à une base de données désignée (ou un accès global à l'ensemble du système si aucune base de données n'est sélectionnée)
      • CREATE : permet de créer de nouvelles tables ou bases de données
      • DROP :permet de supprimer des tables ou des bases de données
      • DELETE : permet de supprimer des lignes des tables
      • INSERT : permet d'insérer des lignes dans les tables
      • SELECT :permet d'utiliser la commande SELECT pour lire des bases de données
      • UPDATE : permet de mettre à jour les lignes d'une table
      • GRANT OPTION : permet d'accorder ou de supprimer les privilèges des autres utilisateurs

      Pour donner une autorisation à un utilisateur spécifique, vous pouvez utiliser le framework suivant :

      • GRANT type_of_permission ON database_name.table_name TO 'username'@'localhost';

      Si vous souhaitez lui donner accès à l'une des bases de données ou des tables, veillez à bien remplacer le nom de la base de données ou de la table par un astérisque (*).

      À chaque fois que vous mettez à jour ou modifiez une autorisation, veillez à bien utiliser la commande Flush Privileges.

      Pour révoquer une autorisation, la structure est pratiquement identique à celle de l'octroi d'autorisation :

      • REVOKE type_of_permission ON database_name.table_name FROM 'username'@'localhost';

      Notez que, lorsque vous révoquez des autorisations, vous devez utiliser la syntaxe FROM à la place du TO que nous avons utilisé pour accorder des autorisations.

      Vous pouvez contrôler les autorisations actuellement octroyées à un utilisateur en exécutant la commande suivante :

      • SHOW GRANTS FOR 'username'@'localhost';

      De la même manière que vous pouvez supprimer des bases de données avec DROP, vous pouvez utiliser DROP pour supprimer complètement un utilisateur :

      • DROP USER 'username'@'localhost';

      Pour tester votre nouvel utilisateur, déconnectez-vous en saisissant :

      et reconnectez-vous en utilisant la commande suivante dans le terminal :

      Conclusion

      Une fois ce tutoriel terminé, vous devriez avoir une meilleure idée sur la manière d'ajouter de nouveaux utilisateurs et de leur octroyer différentes autorisations dans une base de données MySQL. De là, vous pouvez continuer d'explorer et d'expérimenter les différents paramètres d'autorisation qui existent pour votre base de données ou en apprendre plus sur certaines configurations MySQL de niveau supérieur.

      Pour de plus amples informations sur les bases de MySQL, nous vous encourageons à consulter les tutoriels suivants :



      Source link

      Comment créer des éléments par glisser-déposer avec Vanilla JavaScript et HTML


      Introduction

      Le glisser-déposer est une interaction utilisateur courante que vous pouvez trouver dans de nombreuses interfaces graphiques.

      Il existe des bibliothèques JavaScript préexistantes permettant d’ajouter une fonction de glisser-déposer à votre application. Toutefois, il peut arriver qu’une bibliothèque ne soit pas disponible ou qu’elle introduise une surcharge ou une dépendance dont votre projet n’a pas besoin. Dans de telles situations, la connaissance des API dont vous disposez dans les navigateurs web modernes peut vous offrir des solutions alternatives.

      L’API HTML Drag and Drop s’appuie sur le modèle d’événement de DOM pour obtenir des informations sur ce qui est glissé ou déposé et pour mettre à jour cet élément par glisser-déposer. Grâce aux gestionnaires d’événements JavaScript, vous pouvez transformer n’importe quel élément en un élément pouvant être glissé ou déposé.

      Dans ce tutoriel, nous allons construire un exemple de glisser-déposer en utilisant l’API HTML Drag and Drop avec Vanilla JavaScript pour utiliser les gestionnaires d’événements.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      • Un navigateur web moderne qui supporte l’API Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Étape 1 – Création du projet et balisage initial

      Notre projet consistera en un conteneur avec deux types d’éléments enfant :

      • Des éléments enfant que vous pouvez faire glisser
      • Des éléments enfant dans lesquels il est possible de déposer des éléments

      Tout d’abord, ouvrez la fenêtre de votre terminal et créez un nouveau répertoire de projets :

      • mkdir drag-and-drop-example

      Ensuite, naviguez vers ce répertoire :

      Puis créez un fichier index.html dans ce répertoire :

      Ajoutez maintenant du code passe-partout pour une page web HTML :

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Et entre les balises <body> ajoutez votre élément draggable et votre dropzone (cible de largage) :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Enregistrez et fermez le fichier. Ensuite, créez un fichier style.css :

      Puis, ajoutez des styles pour les éléments de notre fichier index.html :

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Cela permettra d'ajouter un certain formatage à l'application. Vous pouvez maintenant visualiser index.html dans le navigateur et observer que cela produit un dragable <div> et un dropzone <div>.

      Capture d'écran des div draggable et dropzone

      Ensuite, nous rendrons explicitement le premier <div> glissant en ajoutant l'attribut draggable :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Enregistrez et fermez le fichier.

      Enfin, regardez à nouveau index.html dans le navigateur. Si nous cliquons sur le draggable <div> et le faisons glisser sur l'écran, il doit y avoir une indication visuelle de son déplacement.

      La valeur par défaut de l'attribut draggable est auto. Cela signifie que la possibilité de faire glisser l'élément sera déterminée par le comportement par défaut de votre navigateur. En général, cela signifie que les sélections de texte, les images et les liens peuvent être glissés sans qu'il soit nécessaire de spécifier draggable=" true".

      Vous avez maintenant un fichier HTML avec un élément glissant. Nous passerons à l'ajout de gestionnaires onevents.

      Étape 2 - Gestion des événements par glisser-déposer avec JavaScript

      Actuellement, si nous relâchons la souris tout en faisant glisser l'élément déplaçable, il ne se passe rien. Pour déclencher une action sur les éléments du DOM par glisser-déposer, nous devons utiliser l'API Drag and Drop :

      • ondragstart : ce gestionnaire d'événement sera attaché à notre élément draggable et se déclenchera lorsqu'un événement dragstart se produira.
      • ondragover : ce gestionnaire d'événements sera attaché à notre élément dropzone et se déclenchera lorsqu'un événement dragover se produira.
      • ondrop : ce gestionnaire d'événements sera également attaché à notre élément dropzone et se déclenchera lorsqu'un événement drop se produira.

      Remarque : il y a huit gestionnaires d'événements au total : ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart et ondrop. Dans le cadre de notre exemple, nous n'aurons pas besoin de tous.

      Tout d'abord, référençons un nouveau fichier script.js dans notre index.html :

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Ensuite, nous allons créer un nouveau fichier script.js :

      L'objet DataTransfer conservera les informations relatives à la traînée actuelle. Pour mettre à jour notre élément par glisser-déposer, nous devons accéder directement à l'objet DataTransfer. Pour ce faire, nous pouvons sélectionner la propriété dataTransfer de l'élément DOM DragEvent.

      Remarque : l'objet DataTransfer peut techniquement suivre les informations de plusieurs éléments glissés en même temps. Dans le cadre de notre exemple, nous nous concentrerons sur le glissement d'un élément.

      La méthode setData de l'objet dataTransfer peut être utilisée afin de définir les informations d'état de glissement pour votre élément actuellement glissé. Il faut deux paramètres :

      • une chaîne qui déclare le format du deuxième paramètre
      • les données réelles transférées

      Notre objectif est de déplacer notre élément draggable vers un nouvel élément parent. Nous devons pouvoir sélectionner notre élément draggable avec un identifiant unique. Nous pouvons définir l’identifiant de l'élément glissé avec la méthode setData pour qu'il puisse être utilisé plus tard.

      Revisitons notre fichier script.js et créons une nouvelle fonction pour utiliser setData :

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Remarque : Internet Explorer 9 à 11 aurait des problèmes avec l'utilisation de "text/plain". Le format doit être 'text' pour ce navigateur.

      Pour mettre à jour le style CSS de l'élément glissé, nous pouvons accéder à ses styles en utilisant à nouveau l'événement DOM et en définissant les styles que nous voulons pour la currentTarget.

      Ajoutons-les à notre fonction et changeons la backgroundColor en yellow :

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Remarque : tous les styles que vous modifiez devront être à nouveau mis à jour manuellement sur drop si vous souhaitez des styles par glisser-déposer. Si vous changez quelque chose quand il commence à glisser, l'élément glissé conservera ce nouveau style à moins que vous ne le changiez à nouveau.

      Maintenant, nous avons notre fonction JavaScript pour le démarrage du glissement.

      Nous pouvons ajouter ondragstart à l'élément draggable dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Consultez index.html dans votre navigateur. Si vous essayez de faire glisser votre objet maintenant, le style déclaré dans notre fonction sera appliqué :

      Gif animé représentant un élément se faisant glisser mais ne pouvant pas être déposer

      Cependant, rien ne se passera lorsque vous relâcherez votre clic.

      Le prochain gestionnaire d'événements déclenché dans cette séquence est ondragover.

      Le comportement par défaut de certains éléments DOM comme <div> dans les navigateurs n'accepte généralement pas d'être déposé. Ce comportement interceptera le comportement que nous essayons de mettre en œuvre. Pour nous assurer que nous obtenons le comportement drop souhaité, nous appliquerons preventDefault.

      Revisitons notre fichier script.js et créons une nouvelle fonction pour utiliser preventDefault. Ajoutez ce code à la fin du fichier :

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Maintenant, nous pouvons ajouter ondragover à notre élément dropzone dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      À ce stade, nous n'avons toujours pas de code écrit pour gérer le dépôt réel. Le dernier gestionnaire d'événements déclenché dans cette séquence est ondrop.

      Revoyons notre fichier script.js et créons une nouvelle fonction.

      Nous pouvons référencer les données que nous avons enregistrées précédemment avec la méthode setData de l'objet dataTransfer. Nous utiliserons la méthode getData de l'objet dataTransfer. Les données que nous avons établies étaient l’id, c'est donc ce qui nous sera renvoyé :

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Sélectionnons notre élément draggable avec l’id que nous avons récupéré :

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Sélectionnons notre élément dropzone :

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Ajoutons notre élément draggable à la dropzone :

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Réinitialisons notre objet DataTransfer :

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Maintenant, nous pouvons ajouter ondrop à notre élément dropzone dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Une fois que cela est fait, nous avons une fonction de glisser-déposer fonctionnelle. Affichez index.html dans votre navigateur et faites glisser l'élément draggable sur la dropzone.

      Gif animé représentant un élément glissé et déposé dans une cible de largage

      Notre exemple porte sur le scénario d'un seul objet pouvant être déplacé et d'une seule cible de largage. Vous pouvez avoir plusieurs objets à faire glisser, plusieurs cibles où les déposer, et personnaliser tout cela avec tous les autres gestionnaires d'événements de l'API Drag and Drop.

      Étape 3 - Construction d'un exemple complexe avec plusieurs éléments glissants

      Voici un autre exemple de la manière dont vous pourriez utiliser cette API : une liste de tâches avec des tâches glissantes que vous pouvez déplacer d'une colonne "To-do" à une colonne "Done".

      Gif animé représentant plusieurs tâches glissées et déposées dans une colonne Done

      Pour créer votre propre liste de tâches, ajoutez à index.html d'autres éléments à faire glisser avec des ids uniques :

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Affichez index.html dans votre navigateur et faites glisser les éléments de la colonne To-do vers la colonne Done. Vous avez créé une application to-do et testé la fonctionnalité.

      Conclusion

      Dans cet article, vous avez créé une application to-do pour explorer la fonctionnalité de glisser-déposer qui est disponible pour les navigateurs web modernes.

      L'API Drag and Drop offre de multiples options pour personnaliser vos actions au-delà du simple glisser-déposer. Par exemple, vous pouvez mettre à jour le style CSS de vos éléments glissés. Vous pouvez également, au lieu de déplacer l'élément, choisir de copier votre élément déplaçable afin qu'il soit reproduit lors du dépôt.

      Gardez à l'esprit que si de nombreux navigateurs web prennent en charge cette technologie, vous ne pourrez peut-être pas vous y fier si votre public se compose d’appareils qui ne prennent pas en charge cette fonctionnalité.

      Pour en savoir plus sur tout ce que vous pouvez déposer avec l'API Drag and Drop, consultez les documents du MDN à ce sujet.



      Source link