jQuery - 在'draggable div'下拉菜单中改变'正常div'内容

Question

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

可拖动的div：

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

普通的div：

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

当 '拖动' 格上 'Dropbox的' 格下降，我想追加 '拖动' 股利“的内容Dropbox'div。

下降后，那么， 'Dropbox的' div的内容应该是：

AAAAAA 
BBBBBB 

请指导我如何做到这一点使用jQuery。

Answer 1

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

看到演示中JSFiddle

Answer 2

可以使用drop事件的droppable：

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

DEMO：http://jsfiddle.net/UrMrt/

Answer 3

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

Answer 4

与UI可放开尝试

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

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