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

Question

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

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 属性作为将一些文本传递给可放置 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>

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

Change droppable div text based on which draggable item is dropped

html

javascript

jquery

jquery-ui

draggable