jQuery-Ui: Không thể kéo đối tượng ra ngoài một accordion

Question

Tôi có một đối tượng có thể kéo bên trong một tiện ích accordion. Khi kéo nó, nó bị ràng buộc bởi cha mẹ của nó, phần tử accordion. Tôi đã cố gắng sử dụng tùy chọn 'ngăn chặn' không thành công.

Tôi đã thử điều này với FireFox 3.5.5 và Chromium 4.

Có cách nào để giải quyết không?

Cảm ơn

Answer 1

Đối với những người bạn đang tìm kiếm một ví dụ hoàn chỉnh, hãy xem Shopping Cart example trên bản demo giao diện người dùng jQuery. Đây là một ví dụ có thể phân tách, nhưng minh họa chính xác những gì đã được hỏi (Kéo một phần tử bên ngoài một accordion).

$(function() { 
     $("#catalog").accordion(); 
     $("#catalog li").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
}); 

Và tiếp tục từ đó.

Answer 2

Bạn đã cố gắng sử dụng các containment value of 'document':

$("#draggable1").draggable({ containment: 'document' }); 

Dưới đây là một ví dụ tôi đã có thể kéo bên ngoài accordion:

<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div id="draggable1"> 
    <p> 
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
     amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
     odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </p> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
     <p> 
     Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
     purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
     velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
     suscipit faucibus urna. 
     </p> 
    </div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $("#accordion").accordion(); 
    $("#draggable1").draggable({ containment: 'document' }); 
}); 
</script> 

Answer 3

câu trả lời của tôi áp dụng cho sortables, tôi nghĩ draggables nên tương tự. Tôi đã có thể làm cho nó hoạt động bằng cách sử dụng 'clone' thay vì mặc định 'gốc' và sử dụng appendTo: 'body'. Đó là lạ bởi vì nếu bạn sử dụng ban đầu như helper nó dường như không phụ thêm người trợ giúp cho cơ thể mặc dù bạn sẽ nghĩ rằng nó nên nếu bạn đặt appendTo: 'cơ thể'. Tôi hy vọng bạn có thể làm cho nó hoạt động!

Answer 4

Hãy thử

$ (".selector") .draggable ({appendTo: 'body'});

Answer 5

Bạn không thể kéo các mục bên ngoài một accordion jQuery bởi vì chế độ tràn được đặt thành ẩn cho các thùng chứa accordion.

1) Bạn có thể thử đặt tràn để hiển thị (bằng cách ghi đè kiểu nội tuyến) nhưng trong trường hợp đó, chính accordion có thể ngừng hoạt động.

<div id="simpleAccordion" style="overflow: visible;"> 

<h3>Header 1<h3> 
<div>...</div> 

<h3>Header 2<h3> 
<div>...</div> 

<h3>Header 3<h3> 
<div>...</div> 

</div>