CODEWITHSUNDEEP
jqueryruby-on-railsjquery-ui
Matthew Melone
Matthew Melone

Reputation: 257

jquery-UI only one item is draggable

In my Rails app, after users choose a series of "plant" objects, the images for those plants are displayed and need to be "draggable." The problem is only the first plant that shows up is ever draggable, whether I try to use some Ruby or a div id. I have no idea what's going wrong, and even the resulting HTML page source looks like it should be working. I've found a similar Q&A here: jQuery Draggable only allowing 1 image to be draggable, but the solution didn't work for my code.

In my application.js:

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

In my view, this only makes the first image displayed "draggable": 

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

And the same thing using a div or an li id:

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

The HTML page source indicates that each item has an id of draggable, but still, only the first item is indeed draggable. I first thought draggable wasn't compatible with the Rails "each" function, but it turns out I can't make ANY other images in my view draggable besides that first plant object. Please help me out. I don't know if it's a bug or a problem with my javascript, I'm fairly new to Jquery.

Upvotes: 0

Views: 543

Answers (1)

Johan
Johan

Reputation: 3212

id's should be unique per page (and so it's only taking the first item), try to give the elements a class draggable.

Upvotes: 3

Related Questions