Question

我一直在尝试允许x-amount动态生成div框，以便使用JQuery相互拖放。

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

以下是代码：

$('#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。您使用class，而您应该在以下行使用id：

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

你做的是，你将所有你的div附加到你放弃的东西上。这意味着您将其附加到自身。

希望这会有所帮助。

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

1 个答案: