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

Question

在我的Rails应用程序中，在用户选择一系列“植物”对象后，将显示这些植物的图像，并且需要“可拖动”。问题是只有第一个出现的工厂是可拖动的，无论我是尝试使用一些Ruby还是div id。我不知道出了什么问题，甚至生成的HTML页面源看起来应该正常工作。我在这里找到了类似的Q＆amp; A：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应该是唯一的（所以它只取第一项），尝试给元素一个可拖动的类。