Cách sắp xếp theo chiều ngang divs bằng cách sử dụng Sortable trong JQuery

Question

Tôi đang tìm cách sắp xếp các div của mình theo chiều ngang trong div vùng chứa. Tôi đã tìm thấy example trên trang web JQuery nhưng đó là phân loại theo chiều dọc. Tôi muốn nó ngang.

Tôi muốn thực hiện việc phân loại trong #sortable Div.

Bạn vui lòng hướng dẫn tôi làm cách nào để chuyển đổi phân loại theo chiều dọc này theo chiều ngang.

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> 

Ảnh chụp màn hình alt text http://i40.tinypic.com/351xsfc.jpg

Answer 1

Bạn chỉ có thể thêm CSS này phong cách:

#sortable>div { float: left; } 

Và chúng sẽ nằm ngang và vẫn có thể sắp xếp. You can see a demo of it in action here.

Answer 2

Mặc dù float:left công trình, ở đây tôi thà sử dụng display:inline-table cho divs, do đó bạn không bị mất khối lượng divs của bạn ...

Answer 3

chỉ cần thêm vào CSS của bạn: display: inline-block;