jQuery UI를 사용하여 divs를 피라미드에 쌓기

Question

jquery를 사용하여 요소를 피라미드에 쌓으려는 시도가 있지만 올바르게 이해할 수 없습니다.

예를 들어 3 가지 항목 (사과, 바나나, 치토) 목록을 갖고 싶습니다. droppable 또는 sortable을 사용하여, 나는 다른 요소로 그 항목을 이동하고 피라미드에 쌓아 놓고 싶습니다.

[......... [치토스] [............]

[사과] .......... .] [banana]

지금까지 나는 목록 요소와 빈 요소를 결합하여 모두 정렬 할 수 있었고 목록 항목을 가져 와서 피라미드 요소에 넣을 수있었습니다. 이 작동합니다.

문제는 피라미드 이외의 구성 (예 : 사과, 바나나 및 치토를 맨 위 행에 삽입)에 항목을 스택하는 기능을 차단하는 것입니다.

또한 DOM에서 실제로 이동하기 위해 이동 된 요소를 갖고 싶습니다. 나는 이것이 draggable/droppable 함수가이 어플리케이션에서 작동하지 않는다는 것을 의미한다고 생각하지만, 나는 그것에 대해 틀릴 수도있다.

도움을 주시면 감사하겠습니다.

Answer 1

난 당신의 문제에 대한 간단한 바이올린을 만들었습니다 http://jsfiddle.net/QXwyk/6/ 기본 개념은 ul 목록을 CSS로 pytamid로 변경하는 것이 었습니다. 요소를 추가하는 것이 꽤 잘 작동하는 반면 불행하게도 피라미드에서 요소를 움직이는 동안 엉망이되었습니다. 아마 이것은 당신을 약간 도울 것입니다 또는 더 시험을위한 좋은 장소일지도 모르다.

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();