拖动带有文本的div并放在另一个上以替换文本

时间:2013-07-30 12:58:12

标签: jquery html replace drag-and-drop

我花了很多时间在堆栈中搜索试图找到这个问题的答案,但没有任何东西真正指向我正确的方向。我想要完成的是拖动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 );     
   }    
 });  
});

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

感谢您查看我的问题。

1 个答案:

答案 0 :(得分:2)

只需使用

$(this).empty();

而不是

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

每次附加新元素时,这将清除计划

FIDDLE

另一种选择是

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