使某些元素的 div 可拖放答案

【问题标题】：Make divs draggable and droppable for certain elements使某些元素的 div 可拖放
【发布时间】：2011-09-01 22:51:30
【问题描述】：

我有一个带有可拖放 div 的页面。每个 div 都包含可拖动的嵌套 div。我希望能够将嵌套的 div 从 div 1 拖放到 div 2 上，反之亦然。我尝试这样做的jsfiddle位于此链接http://jsfiddle.net/fWhDn/

如果我将 msn.com 链接（可拖动的 div）从 div 2 移动到 div 1，它不会被放入该 div。我必须如何解决才能获得正确的行为，即该链接成为 div 1 的一部分？

【问题讨论】：

标签： html drag-and-drop draggable droppable

【解决方案1】：

要使其工作，您必须将可拖动 div 附加到相应的可放置 div。你可以通过 droppable init 中的 drop 事件来做到这一点。我为每个可放置的 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/

【讨论】：