Question

以下代码有什么问题？

JS：

$(document).ready( function() {

    $('#diag1').draggable();
    $('#diag1').css('background-color', '#f4f');
    $('#diag1').width('100px');
    $('#diag1').height('50px');

    $('#cnt1').css('background-color', '#4ff');
    $('#cnt1').width('300px');
    $('#cnt1').height('300px');

    $('#cnt1').droppable({
        drop: function( event, ui ) {                
            $(this).append(ui.draggable);
        }
    });

});

HTML：

<div id="cnt1">ddd</div>
<div id="diag1">Dialog 1</div>

如果我将较小的div放在较大的div上，它会隐藏起来。为什么呢？

Answer 1

除了你已经对它进行编码之外什么都没有，所以当div被删除时，它变成了较大div的子节点，然后根据它在屏幕上结束的定位。看看重新定位较大的div时会发生什么： jsFiddle

Answer 2

#diag1{
    position:absolute;
}

或添加

$('#diag1').css('position', 'absolute');

我不是百分百肯定，这是你在找什么？

http://jsfiddle.net

Answer 3

它不会消失。它附加到您放置的位置，但它保留旧的位置值并在屏幕外结束。您应该尝试在position: absolute上使用diag1，因此droppable不会使用position: relative。现在，位置坐标始终将在文档的左上角而不是容器中进行测量。

Answer 4

如果你想要做的只是保持可拖动视图，那么只需删除以下

$(this).append(ui.draggable);

如前所述，追加和定位导致问题。

使用jQuery拖放

4 个答案: