Banniere draggable jquery ui

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 :

    
    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;}

<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>

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

<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 draggé jusqu'a la dernière div

Merci d'avance au contributeur !
Modifié par trainsrenton (19 May 2013 - 12:29)

petit up

toujours pas ?