爲什麼當我嘗試將它們放入對方時，我的所有JQuery拖放對象都消失了？

我一直在試圖允許x量的動態生成div盒使用JQuery拖放到彼此。爲什麼當我嘗試將它們放入對方時，我的所有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>

欣賞的幫助

來源

2012-12-18 Carlos Mendieta

的問題是，你的對話沒有獨特的IDS。您可以使用類，而你應該在下面一行用ID：

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

你做什麼，是你所有你的div追加到一個你放下的東西。這意味着你將它附加到自己。

希望這會有所幫助。

來源

2012-12-18 15:04:02

確實有道理。問題是我正在動態生成框......所以我的下一個問題是，我如何獲得我拖動的框的ID？ –

你不需要。您可以使用參數的jQuery提供： http://api.jqueryui.com/droppable/#event-drop 重寫你的方法過來：函數（事件，UI）{$ （ui.draggable） .appendTo（$（this））; ... } ui.draggable應該是拖動對話框的jQuery對象。這應該可行，但我不確定自己是否寫得對，只是給了你一個想法。順便說一句，你爲什麼使用'over'，但不放棄？ http://api.jqueryui.com/droppable/#event-drop –

爲什麼當我嘗試將它們放入對方時，我的所有JQuery拖放對象都消失了？

回答

相關問題