Partage
  • Partager sur Facebook
  • Partager sur Twitter

Faire défiler des image en maintenant le clique

    18 mai 2022 à 19:22:34

    Bonsoir

    Je cherche à pouvoir faire défiler ma liste d'image en maintenant le clique gauche de la souris maintenu.

    Exactemenet comme ubereats.com propose (sur le site mobile)

    Ce menu peut défiler en maintenant le clique gauche maintenu.

    Auriez vous une piste à me conseiller ou un exemple de code ?

    La structure du code html est assez basique, une simple liste

                <article>
                    <h2 class="line-height-44 font-size-36 font-weight-700 margin-bottom-1_5rem">Nos sites</h2>
                    <ul class="overflow-x-hidden display-flex">
                        <li class="margin-right-0_7rem flex-direction-column align-items-center display-flex">
                            <img alt="Photo site" loading="lazy" src="/ressources/profil.jpg">
                            <span>Nom du site</span>
                        </li>
                        <li class="margin-right-0_7rem flex-direction-column align-items-center display-flex">
                            <img alt="Photo site" loading="lazy" src="/ressources/profil.jpg">
                            <span>Nom du site</span>
                        </li>
                        <li class="margin-right-0_7rem flex-direction-column align-items-center display-flex">
                            <img alt="Photo site" loading="lazy" src="/ressources/profil.jpg">
                            <span>Nom du site</span>
                        </li>
                        <li class="margin-right-0_7rem flex-direction-column align-items-center display-flex">
                            <img alt="Photo site" loading="lazy" src="/ressources/profil.jpg">
                            <span>Nom du site</span>
                        </li>
                        <li class="margin-right-0_7rem flex-direction-column align-items-center display-flex">
                            <img alt="Photo site" loading="lazy" src="/ressources/profil.jpg">
                            <span>Nom du site</span>
                        </li>
                    </ul>
                </article>

    En vous remerciant

    • Partager sur Facebook
    • Partager sur Twitter
      18 mai 2022 à 20:30:28

      Salut,

      tu pourrais faire un truc comme ça : un mousedown sur l'élément qui peut défiler, un mouseup sur le window, au cas ou on déplace la souris en sortant du cadre de l'élément et qu'on relâche la souris sur window, un interval qui se répète toutes les 20 millisecondes et on ajoute +1 au scrollLeft.

      let a = document.querySelector("#a");
      let md = false;
      let interv;
      
      a.addEventListener("mousedown", ()=>{
        md = true;
        interv = setInterval(anim, 20);
      });
      window.addEventListener("mouseup", ()=>{
        if (md) clearInterval(interv); md = false;
      });
      
      function anim(){
        if (md) a.scrollLeft += 1
      }



      -
      Edité par Arthur222 18 mai 2022 à 20:31:09

      • Partager sur Facebook
      • Partager sur Twitter
        19 mai 2022 à 14:44:42

        Bonjour Arthur22 et merci

        J'ai cherché sur le net ou même dans le code source d'ubereats mais je n'ai pas réussi à trouver la solution à mon besoin malgrés le code que tu me proposes.

        Pour moi l'idée aurait été de:

        Initialisation

        Variable booléenne à false

        détecter si il y a un mousedown parmis les enfants de la balise <ul>

                            si oui, variable booléenne à true

                            On regarde maintenant si il y un mouse move toujours parmis <ul> et ses enfants

                                                 Oui, on translateX <ul> de 1px [Comment choisir la direction ? Je veux que cela puisse parcourir toutes la liste, sachant qu'une partie est overflow(le principe est d'afficher les profils cachés par l'overflow en faisant défiler, donc quand on arrive à la fin de la lioste il faut pouvoir revenir au début, comme sur ubereats.com/fr/feed/, en se déplacant vers x et -x)]

                                                                  On regarde si il y a un mouseup sur la window

                                                                              Si oui, varaible booléenne à false




        Merci pour votre aide

        -
        Edité par Val - M 19 mai 2022 à 14:46:21

        • Partager sur Facebook
        • Partager sur Twitter
          23 mai 2022 à 8:46:15

          Bonjour, tu peux surement le faire fonctionner avec l'API drag-and-drop native d'HTML

          tu peux te référer a la documentation de MDN Drag And Drop API

          Un article (anglais) qui montre un cas concret d'utilisation du Drag And Drop.

          Un des problème que tu peux avoir en essayant de simuler l'API du drag and drop à la main, en plaçant manuellement les événements mousemove, mouseenter, mouseleave ect...

          Ces événements sont dépendant au dispositif de pointage (il ne fonctionneront pas sur un appareil tactile comme un téléphone par exemple).

          Avec l'API drag and drop le navigateur convertira les événements automatiquement, car il ces que les événements de la souris sont associé à l'action d'un drag and drop donc il ces comment appliquer la convertion.

          Si tu l'écrits à la main le navigateur na pas conscience que t'es événements souris sont associé à un drag and drop il convertira rien.  

          -
          Edité par SamuelGaborieau3 23 mai 2022 à 8:49:41

          • Partager sur Facebook
          • Partager sur Twitter

          suggestion de présentation.

          Faire défiler des image en maintenant le clique

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown