jquery - 为什么当我尝试将它们放入彼此时，我所有的 JQuery 拖放对象都消失了？

Question

我一直在尝试使用 JQuery 允许 x 数量的动态生成的 div 框相互拖放。

问题是，每当我尝试将一个框拖入另一个框时，我生成的每个框，无论是否参与操作，都会消失。

Here's the fiddler link .

代码如下:

$('#btnOpen').click(function() { OnClientDroppedHandler(); });    


function OnClientDroppedHandler() {

    $('#divWorkSpace').append('<div class="divLoc"><p> I am a box.  Try to Drag and Drop me into another box </p></div>');
    $('.divLoc').resizable();

    $('.divLoc').droppable({
        accept: '.divLoc',
        over: function () {
                $('.divLoc').appendTo($(this));
                $(this).animate({ 'border-width': '5px',
                    'border-color': '#0f0'
                }, 500);
                $('.divLoc').draggable('option', 'containment', $(this));
        }
    });

    $('.divLoc').draggable({
        containment: $('.divWorkSpace')
    });
    return false;      
};

CSS:

.divLoc
{
width:100px;
height:100px;
background-color: White;
border: 1px solid black;
z-index: 100;
}

标记:

<input id="btnOpen" type="button" value="Click to Open New Dialog" /> -- Generate at least two dialogs and try to drag and drop them into each other --
<div id="divWorkSpace" style="height: 500px; width: 700px; background-color: Gray;"></div>

感谢帮助

Answer 1

问题是您的对话框没有唯一的 ID。您使用类，而您应该在以下行中使用 id:

$('.divLoc').appendTo($(this));

您所做的是将所有 div 附加到您放置某些东西的 div 上。这意味着您将其附加到自身。

希望这会有所帮助。