bannière draggable avec Jquery ui draggable

trainsrenton
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

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
Auteur

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
Auteur

petit up

Lotfi Berrahal

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
Auteur

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

quand je fais ça :

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

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

trainsrenton
Auteur

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

Lotfi Berrahal

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>