使div可拖動和可放置某些元素

Question

我有一個可拖動和放置div的頁面。每個div包含可拖動的嵌套div。我想能夠從div 1拖動嵌套的div並將它們放在div 2上，也可以通過其他方式。我試圖做的jsfiddle是在這個鏈接http://jsfiddle.net/fWhDn/

如果我將msn.com鏈接（draggable div）從div 2移動到div 1，則不會將其放入該div。爲了獲得正確的行爲，我必須做些什麼？即，哪些鏈接成爲div 1的一部分？

Answer 1

爲了得到這個工作，你必須將可拖動的div附加到相應的可拖動div上。您可以通過droppable init中的drop事件來完成此操作。我爲每個droppable div設置它以訪問$（this）。重置項目的CSS也很重要，就好像它不會佔據它在拖動它時的位置。以下是我加：

$("#editdiv .droppable").droppable({ 
    drop: function(event, ui) { 
     var $item = ui.draggable; 
     $item.fadeOut(function() { 

     $item.css({"left":"", "top":"", "bottom":"", "right":"" }).fadeIn(); 
    }); 
$item.appendTo(this); 
    } 
}); 
$("#editdiv_ .droppable").droppable({ 
    drop: function(event, ui) { 
     var $item = ui.draggable; 
     $item.fadeOut(function() { 

     $item.css({"left":"", "top":"", "bottom":"", "right":"" }).fadeIn(); 
    }); 
$item.appendTo(this); 
} 
}); 

而這裏的更新小提琴：http://jsfiddle.net/TpbZk/