bannière draggable avec Jquery ui draggable

Par trainsrenton, il y a 12 ans

Javascript

bonjour a tous,
je souhaite créer une bannière draggable. Cette bannière est constituer de plusieurs div en float. Le plus simple reste le code :

<style>
    body{margin: 0;}
    #banniere{width: 100%; overflow: hidden; background: black;}
    #bla{width: 2500px; float: left;}
    #banniere .ban1{width: 400px; height: 400px; margin: 0 5px; float: left;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(function() {
        $( "#bla" ).draggable({ axis: "x" });
    });
</script>
<div id="banniere">
            <div id="bla">
                    <div class="ban1" style="background:red"></div>
                    <div class="ban1" style="background:yellow"></div>
                    <div class="ban1" style="background:yellowgreen"></div>
                    <div class="ban1" style="background:purple"></div>
                    <div class="ban1" style="background:pink"></div>
                    <div class="ban1" style="background:green"></div>
            </div>
         </div>

alors dans la configuration actuelle sa marche sauf que j'aimerai qu'il ne soit plus possible de daggé a la fin de la dernière div

Merci d'avance au contributeur !

8 réponses

Lotfi Berrahal, il y a 12 ans

Bonsoir,
Pourquoi tu laisse la dernière div (celle non draggable) dans la div avec l'id bla?
Idéalement tu devrais laisser cette div seule après genre :

<div id="bla">
          <div class="ban1" style="background:red"></div>
          <div class="ban1" style="background:yellow"></div>
          <div class="ban1" style="background:yellowgreen"></div>
          <div class="ban1" style="background:purple"></div>
          <div class="ban1" style="background:pink"></div>
    </div>
    <div class="ban1" style="background:green"></div>
trainsrenton, il y a 12 ans

la dernière div est draggable sauf que sa doit s’arrêter a la première et a dernière. Actuellement on c'est infinie. le mieux est tester le code pour s'en rendre compte.

trainsrenton, il y a 12 ans

petit up

Lotfi Berrahal, il y a 12 ans

As u essayé ça ?

$(function() {
        $( ".ban1" ).draggable({ axis: "x", containment: "#banniere" });
    });

J'ai vu ça dans la doc UI et il te propose une démo.
Cela dit dans le code que je te propose c'est chaque carré qu'on peut déplacé dans la fenêtre.

trainsrenton, il y a 12 ans

Pour préciser une peut l'effet voulut il faut que les div ban1 ne bouge pas, seulement la div bla doit pouvoir ce balader.

pour le moment j'en suis la :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">
<head>
         <style>
                body{margin: 0;}
                #banniere{width: 100%; overflow: hidden; background: black;}
                #bla{width: 2500px; float: left;}
                #banniere .ban1{width: 400px; height: 400px;float: left;}
            </style>
    </head>
    <body>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
             $(function() {
                $( "#bla" ).draggable({ axis: "x" ,containment: -532,0,$(window).width()-1868,500]});
             });
        </script>
        <div id="banniere">
            <div id="bla">
                    <div class="ban1" style="background:red"></div>
                    <div class="ban1" style="background:yellow"></div>
                    <div class="ban1" style="background:yellowgreen"></div>
                    <div class="ban1" style="background:purple"></div>
                    <div class="ban1" style="background:pink"></div>
                    <div class="ban1" style="background:green"></div>
            </div>
         </div>
    </body>
</html>

cette méthode marche mais uniquement sur ma résolution des que l'on modifie la taille de la fenêtre l'effet par en vrille.
je dois avouer que je sèche complet la !

j'ai utiliser jquery ui mais c'est pas une obligation si quelqu'un a une autre méthode je suis preneur

Merci

Lotfi Berrahal, il y a 12 ans

quand je fais ça :

$(function() {
        $( "#bla" ).draggable({ axis: "x", containment: "#banniere" });
    });

Ca marche bien mais le rendu est pas exceptionnel...

trainsrenton, il y a 12 ans

oui j'ai tester deja :( je comprend pour pourquoi l'animation ce comporte de la sorte... c'est etrange !

Lotfi Berrahal, il y a 12 ans

tu devrais essayer la même choses mais avec des dimensions plus petites déjà voir le rendu.
Ensuite tu vois si c'est du au fait que ta barre dépasse l'écran que l'effet rendu soit si bof !
comme ça l'effet est correct non ?

<!DOCTYPE html>
<html>
<head>
    <style>
    body{margin: 0;}
    #banniere{width: 100%; overflow: hidden; background: black;}
    #bla{width: 660px; float: left;}
    #banniere .ban1{width: 100px; height: 100px; margin: 0 5px; float: left;}
</style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(function() {
        $( "#bla" ).draggable({ axis: "x", containment: "#banniere" });
    });
</script>
</head>
<body>
<div id="banniere">
            <div id="bla">
                    <div class="ban1" style="background:red"></div>
                    <div class="ban1" style="background:yellow"></div>
                    <div class="ban1" style="background:yellowgreen"></div>
                    <div class="ban1" style="background:purple"></div>
                    <div class="ban1" style="background:pink"></div>
                    <div class="ban1" style="background:green"></div>
            </div>
         </div>
</body>
</html>