2010-03-30 90 views
21

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.Cách sắp xếp theo chiều ngang divs bằng cách sử dụng Sortable trong JQuery

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

Trả lời

25

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.

+1

Nó hoạt động, thanks :) –

+0

Đây là câu trả lời hay nhất cho khả năng tương thích của trình duyệt. Đừng quên tạo kiểu cho trình giữ chỗ của bạn bằng dấu phẩy: còn lại. Nếu bạn đang thêm các mục động vào danh sách của mình, bạn cũng có thể cần quản lý div "clear: both" ở cuối danh sách để giữ lại âm lượng/chiều cao của chính danh sách. –

4

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

3

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

Các vấn đề liên quan