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更改为＆＃34; drag_great＆＃34;和＆＃34; drag_poor＆＃34;，而不是＆＃34; drag1＆＃34;和＆＃34; drag2＆＃34;与jQuery代码中的内容相匹配。

Answer 2

我使用了您的代码段，它似乎以这种方式工作。我已经添加了data-info属性作为将一些文本传递给droppable div的选项。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: