Question

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

Draggable div：

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

普通div：

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

当＆＃39;可拖动＆＃39; div被放置在＆＃39; dropbox＆＃39; div，我想附加＆＃39; draggable＆＃39;的内容。 div到＆＃39; dropbox＆＃39;格。

所以放弃后，＆＃39; dropbox＆＃39;的内容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

您可以使用droppable的{{3}}事件：

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

DEMO： drop

jQuery - 在'draggable div'中删除'正常div'内容

4 个答案: