jquery-UI 只有一项是可拖动的

Question

在我的 Rails 应用程序中，用户选择了一系列“植物”对象后，这些植物的图像就会显示出来，并且需要“可拖动”。问题只是出现的第一个植物是可拖动的，无论我尝试使用一些 Ruby 还是 div id。我不知道出了什么问题，甚至生成的 HTML 页面源看起来应该可以工作。我在这里找到了类似的问答：jQuery Draggable only allowing 1 image to be draggable，但该解决方案不适用于我的代码。

在我的 application.js 中：

$(function() {
    $( "#draggable" ).draggable();
});  

在我看来，这只会使显示的第一张图像“可拖动”：

<% @plants.each do |plant| %>  
  <li>                         
 <%= image_tag(plant.image_path, :id => "draggable", :size => "50x50")%>       
  </li>
<% end %>   

同样的事情使用 div 或 li id：

<% @plants.each do |plant| %>  
  <li id="draggable">                         
     <%= image_tag(plant.image_path, :size => "50x50")%>       
  </li>
<% end %>      

HTML 页面源表明每个项目都有一个可拖动的 id，但仍然只有第一个项目确实是可拖动的。我最初认为 draggable 与 Rails 的“each”函数不兼容，但事实证明，除了第一个植物对象之外，我无法使视图中的任何其他图像可拖动。请帮帮我。我不知道这是我的 javascript 的错误还是问题，我对 Jquery 还很陌生。

Answer 1

每个页面的 id 应该是唯一的（因此它只采用第一项），尝试为元素提供一个可拖动的类。