使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/