jQuery UI UI Rails的可拖放功能不起作用

Question

我正在使用jquery-ui-rails gem。 我想實現一個可拖動和可拖放的簡單示例。 這是javascript文件：

$('.draggable_images').draggable();
    $('#droppable1').droppable({
     drop: function(event,ui){
     $(this).addClass("ui-state-highlight").find("p").html("Added!");
  }
});

但是，放置圖像時，droppable p標簽的內容不會更改。 當我嘗試小提琴時，相同的代碼有效。 我雖然可能是jquery-rails和jquery-ui-rails兼容性的問題，但是jquery-rails的版本是3.1.2，而ui-rails是5.0.3。

我究竟做錯了什么？

這些是其他文件：

html文件

<% @ingredients.each do |ingredient| %>
  <li class = "draggable_images">
    <%= image_tag Ingredient.where(id: ingredient.ingredient_id).first.image_url%>
  </li>
<% end %>
</ul>

<style>
   #droppable1 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border-style: solid;}
</style>

<div id="droppable1">
  <p>Drop here</p>
</div>

Application.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require turbolinks
//= require_tree .

/* Developer JS */
//= require welcome

Application.css

*= require jquery-ui
 *= require_tree .
 *= require_self

我還預編譯了資產

Answer 1

看來問題出在CSS中。 顯然，可拖動的li元素大於可放置的div（因為li是塊大小，並且div的寬度為150px）。

請看這個例子 。 這表明如果您沒有為可放置div設置float，width和height，則如下所示：

#droppable1 { padding: 0.5em; margin: 10px; border-style: solid; }

然后，您的代碼應該可以正常工作。

另一個選擇是限制可拖動li的大小，使其適合目標div。