jQuery - 'draggable div'のドロップで 'normal div'コンテンツを変更

Question

私のページに2つのdivがあります.1つはdraggableで、それ以外は正常です。

ドラッグ可能DIV：

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

通常のdiv：

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

'ドラッグ' のdivが 'ドロップボックス' のdivの上にドロップすると、私は 'から 'ドラッグ' のdivの内容を追加したいですdropbox 'div。

ので、ドロップした後、「ドロップボックス」の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()); 
      } 
     }); 
    }); 

uはjqueryui.comを訪れJSFiddle

Answer 2

あなたはdroppableのdropイベントを使用することができます。

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

DEMO：ドロップ可能なUIでhttp://jsfiddle.net/UrMrt/

Answer 3

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

Answer 4

てみ

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

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