Question

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

如果我将msn.com链接（可拖动的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/

使div可拖动并可放置某些元素

1 个答案: