基於哪個可拖動的項目被丟棄，更改可放置的div文本

Question

研究員程序員， 我有2個可拖動的div，它們具有唯一的ID。我需要將可丟棄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

我用你的代碼片段，它似乎工作的方式。 我已經添加了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>

Answer 2

更改您可拖動的元素 「drag_great」 和 「drag_poor」，而不是 「drag1」 和「的ID drag2「來匹配你在jQuery代碼中的內容。