jquery 可排序和可放置 - 不能附加放置项目？答案

【问题标题】：jquery sortable and droppable - cannot append the drop item?jquery 可排序和可放置 - 不能附加放置项目？
【发布时间】：2012-12-01 23:56:52
【问题描述】：

我想将已删除的项目附加到可排序列表中的目标可放置框中，但我无法将已删除的项目附加到特定元素中。

我的 jquery，

$(".sortable").sortable({
    update: function(){
    // php update.
    }
}).disableSelection();


$( ".droppable" ).droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {

        var targetElem = $(this).attr("id");

        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped! inside " + targetElem );

            alert(targetElem);

        var container = $( this ).find( "ul.dropped-items" ).css({border:"blue solid 1px"});

        container.append(ui.draggable.clone());

        ui.draggable.remove();

    }
});

被丢弃的项目应该附加到这个元素中，

<ul class="dropped-items">
</ul>

但这只是没有发生。我错过了什么，我该如何让它发挥作用？

jsfiddle test page.

【问题讨论】：

对我来说很好。 li 附加到 ul。这不是你想要的吗？
我这边还是没有运气。是的，我想要li appended to the ul。谢谢。
你用的是什么浏览器？
也适合我。我认为由于位置是绝对的，您可能只是看错了。
已附加。也许您在谈论样式问题

标签： php jquery jquery-ui jquery-ui-sortable jquery-ui-droppable

【解决方案1】：

您可以删除元素上的绝对位置样式：

Javascript

...
container.append(ui.draggable.clone().css({position: 'relative', left: 0, top: 0, width: 'auto', height: 'auto'}));
...

Demo

或者，添加样式来做同样的事情：

CSS

.dropped-items li {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
}

Demo

【讨论】：

为什么会有absolute position styling on the element？我根本没有在我的css中设置它......