jquery - jQuery - 在拖放“可拖动 div”时更改“普通 div”内容

Question

我的页面上有两个 div。一个是可拖动的，另一个是正常的。

可拖动的 div：

<div id='draggable'>
     AAAAAA
</div>

普通div：

<div id='dropbox'>
     BBBBBB
</div>

当 'draggable' div 放在 'dropbox' div 上时，我想将 'draggable' div 的内容附加到 'dropbox' div。

所以在 drop 之后，'dropbox' div 的内容应该是：

AAAAAA
BBBBBB

请指导我如何使用 jQuery 执行此操作。

Answer 1

$("#dropbox").droppable({
    drop: function(event, ui) {
        $(this).append(ui.draggable.html());
    }
})​

Answer 2

尝试使用 UI droppable

$(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this ).append( ui.draggable.html();
            }
        });
    });

http://jqueryui.com/demos/droppable/

Answer 3

$(function() {
        $( "#draggable" ).draggable();//your drag handler
        $( "#dropbox" ).droppable({ //your drop handler
            drop: function( event, ui ) {
                $( this ).append( ui.draggable.html() );
            }
        });
    });

参见JSFiddle中的演示

Answer 4

您可以使用以下drop事件droppable：

$("#dropbox").droppable({
    drop: function(event, ui) {
        $("<div></div>").text(ui.draggable.text()).appendTo(this);
    }
})​

演示：http: //jsfiddle.net/UrMrt/