如何制作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; }