1

私は、動的に生成されたdivボックスのx量が、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 に答える