jquery - 将带有文本的 div 拖放到另一个上以替换文本

Question

我花了相当多的时间在堆栈中搜索，试图找到这个问题的答案，但没有什么能真正为我指明正确的方向。我想要完成的是将 div 框 A 拖放到 div 框 B 上，然后 B 中的内容将替换为 A 中的内容。我用 jQuery UI 站点中修改的、精简的示例创建了一个小提琴，而且我知道 .appendTo 是我需要更改的，但我无法弄清楚将其更改为什么以替换现有文本。

http://jsfiddle.net/66CrN/

$(function() {  
$( "#officer div" ).draggable({      
appendTo: "body",      
helper: "clone"    
});    

$( "#schedule" ).droppable({      
activeClass: "ui-state-default",      
hoverClass: "ui-state-hover",      
accept: ":not(.ui-sortable-helper)",      
drop: function( event, ui ) {        
$( this ).find( ".placeholder" ).remove();        
$( "<span></span>" ).text( ui.draggable.text()).appendTo( this );     
   }    
 });  
});

一如既往的任何帮助表示赞赏。

谢谢你看我的问题。

Answer 1

只需使用

$(this).empty();

代替

$( this ).find( ".placeholder" ).remove(); 

这将在每次添加新元素时清除时间表

小提琴

另一种选择是

$(this).html($("<span></span>").text(ui.draggable.text()));