如何製作div物品堆棧

Question

我有以下代碼，可以正常工作，我試圖在物品移入boxA時將物品堆疊起來。我會怎麼做呢？

$(function() { 
    $("#sortable").sortable(); 
    $("#boxA").droppable({ 
     activeClass: 'ui-state-hover', 
     hoverClass: 'ui-state-active', 
     drop: function (event, ui) { 
      $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); 
      find('li').children().remove(); 
     } 
    }); 

---

<div id='main_content'> 
    <ul id="sortable"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     <li>Item 5</li> 
    </ul> 
    <div id='boxA' class='ContentBoxes'> 
     <div class='ContentMenu'>Column A</div> 
     <p>Drop an item on me.</p> 
    </div>​ 

Answer 1

從代碼量小，你已經給了我偵察的問題來自於你追加的事實李進入一個div，他們應該真的進入ul。

如果您將它們追加到#boxA中的ul中，它們應該自動疊加到彼此之下。

如果你想讓它們堆疊在一起，那麼你將需要添加一些CSS，使它們絕對定位在它們被放入的ul中。

Answer 2

你可以在CSS中做到這一點：

#boxA li { display: block; }