根据放置的可拖动项更改可放置的div文本

Question

各位程序员，我有2个具有唯一ID的可拖动div。 我需要将可拖放div上的文本更改为基于拖放的特定文本。

HTML：

<div id="drag1" class="ui-widget-content">
    <p>Great</p>
</div>


<div id="drag2" class="ui-widget-content">
    <p>Poor</p>
</div>

<div id="droppable" class="ui-widget-header">
    <p>You Chose</p>
</div>    

jQuery代码：

$( "#drag1, #drag2" ).draggable();

    $( "#droppable" ).droppable({
    drop: function( event, ui )
    {
        $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
        .html(ui.draggable[0].id);
    }
});

Answer 1

将可拖动元素的ID更改为“ drag_great”和“ drag_poor”，而不是“ drag1”和“ drag2”，以匹配jQuery代码中的内容。

Answer 2

我使用了您的代码段，它似乎可以正常工作。 我添加了data-info属性作为将一些文本传递到droppable div的选项。

 $( "#drag1, #drag2" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $(this) .addClass("ui-state-highlight") .find("p") .html($('#'+ui.draggable[0].id).data('info')); } }); 

 .ui-widget-content { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <div id="drag1" data-info="My great div was chosen" class="ui-widget-content"> <p>Great</p> </div> <div id="drag2" data-info="My poor div was chosen" class="ui-widget-content"> <p>Poor</p> </div> <div id="droppable" class="ui-widget-header"> <p>You Chose</p> </div>