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

从你提供的少量代码我解决问题来自你将li附加到div上的事实，他们应该真的进入ul。

如果你将它们附加到#boxA中的ul中，它们应该自动堆叠在彼此之下。

如果你希望它们叠加在一起，那么你需要添加一些CSS，使它们绝对定位在它们被放入的ul中。

Answer 2

你可以在css中执行此操作：

#boxA li { display: block; }