1

我一直在尝试允许 x 数量的动态生成 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>

感谢帮助

4

1 回答 1

1

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

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

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

希望这会有所帮助。

于 2012-12-18T15:04:02.693 回答