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/