Xếp chồng div vào một kim tự tháp bằng cách sử dụng jQuery UI

Question

Tôi đang cố gắng sử dụng jquery để xếp các phần tử vào một kim tự tháp, nhưng tôi không thể nhìn thấy để làm cho nó đúng.

Ví dụ: tôi muốn có danh sách có 3 mục (táo, chuối, cheeto). Sử dụng droppable hoặc sắp xếp, tôi muốn di chuyển các mục đó đến một phần tử khác và xếp chúng vào một kim tự tháp.

[.........] [cheeto] [............]

[apple] [.......... Cho đến nay, tôi đã có thể kết hợp phần tử danh sách và phần tử trống để chúng có thể sắp xếp được, và tôi có thể lấy các mục danh sách và thả chúng vào phần tử kim tự tháp. Những công việc này.

Sự cố này ngăn không cho ngăn xếp các mục trong cấu hình khác với kim tự tháp, ví dụ như chèn táo, chuối và cheeto vào hàng trên cùng.

Tôi cũng muốn có các yếu tố được di chuyển để thực sự được di chuyển trong DOM. Tôi nghĩ rằng điều này có nghĩa là chức năng kéo/có thể kéo được sẽ không hoạt động đối với ứng dụng này, nhưng tôi có thể sai về điều đó.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Tôi đã thực hiện câu đố đơn giản cho vấn đề của bạn http://jsfiddle.net/QXwyk/6/ Khái niệm cơ bản là thay đổi danh sách ul thành pytamid bằng css. Trong khi thêm các yếu tố làm việc khá tốt, không may nó đã bị rối tung lên trong khi di chuyển các yếu tố trong kim tự tháp. Có lẽ điều này sẽ giúp bạn một chút hoặc nó có thể là một nơi tốt để thử nghiệm thêm.

Html

<ul id="pyramid" class="pyramid sortable"> 
</ul> 

<ul id="fruits" class="fruits sortable"> 
    <li>cheeto</li> 
    <li>apple</li> 
    <li>banana</li> 
    <li>kiwi</li> 
    <li>strawberry</li> 
    <li>limon</li> 
</ul> 

JS

$("#fruits, #pyramid").sortable({ 
    connectWith: ".sortable", 
    placeholder: "ui-state-highlight", 
    cursor: "move", 
}).disableSelection();