根据拖放的可拖动项目更改可拖放的 div 文本答案

【问题标题】：Change droppable div text based on which draggable item is dropped根据拖放的可拖动项目更改可拖放的 div 文本
【发布时间】：2015-12-10 19:48:54
【问题描述】：

各位程序员，我有 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);
    }
});

【问题讨论】：

标签： javascript jquery html jquery-ui draggable

【解决方案1】：

我使用了你的代码 sn-p，它似乎是这样工作的。我添加了 data-info 属性作为将一些文本传递给可放置 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>

【讨论】：

我想让它说“嘿，太好了，你选择了 drag1！”或“你决定使用 drag2！”

【解决方案2】：

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

【讨论】：

抱歉，我在上传时更改了我的 id，但忘记切换了。
还是坏掉了？你能解释一下到底发生了什么错误。我为这里的场景做了一个 jsfiddle：jsfiddle.net/yoxsqosa。它似乎按您的意愿工作。
我希望能够添加特定文本而不是 id。