Comment trier horizontalement divs en utilisant Sortable dans JQuery

Question

Je cherche à trier mes divs horizontalement dans un conteneur div. J'ai trouvé un example sur le site JQuery mais c'est un tri vertical. Je le veux horizontal.

Je veux le faire en triant #sortable Div.

Pourriez-vous s'il vous plaît me guider comment puis-je convertir ce tri vertical de manière horizontale.

CSS

<style type="text/css"> 
    #draggable1 { width: 150px; height: 35px; padding: 0.5em; } 
    #draggable2 { width: 150px; height: 35px; padding: 0.5em; } 
    #draggable3 { width: 150px; height: 35px; padding: 0.5em; } 

    #sortable { width: 700px; height: 35px; padding: 0.5em; } 
</style> 

JavaScript

<script type="text/javascript"> 
    $(function() { 
     $("#sortable").sortable({ 
      revert: true 
     }); 
    }); 
</script> 

HTML

<div class="demo"> 
    <div id="sortable" class="ui-state-default"> 
     <div id = "draggable1" class="ui-state-default">Home</div> 
     <div id = "draggable2" class="ui-state-default">Contact Us</div> 
     <div id = "draggable3" class="ui-state-default">FAQs</div> 
    </div> 
</div> 

Screenshot alt text http://i40.tinypic.com/351xsfc.jpg

Answer 1

Vous pouvez simplement ajouter ce CSS style:

#sortable>div { float: left; } 

Et ils seront horizontaux et toujours triables. You can see a demo of it in action here.

Answer 2

Bien que float:left œuvres, ici je préfère utiliser display:inline-table pour les divs, de sorte que vous ne perdez pas le volume de vos divs ...

Answer 3

simplement ajouter à votre CSS: display: inline-block;