jquery-ui-rails draggable and droppable function does not work

Question

I am using jquery-ui-rails gem. I want to implement a simple example of draggable and droppable. This is the javascript file:

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

But the contents of the droppable p tag does not change when an image is dropped. The same code worked when i tried in fiddle. I though it could be the issue with jquery-rails and the jquery-ui-rails compatibility, but the versions of jquery-rails is 3.1.2, and ui-rails is 5.0.3.

What am I doing wrong?

These are the other files:

the html file `

<% @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

I have also precompiled the assets

Answer 1

it seems the problem is in the CSS. Apparently the draggable li element is bigger than the droppable div (because the li is block size and the div has a 150px width).

Please take a look at this example . That shows that if you didn't set float, width and height for the droppable div, like so:

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

Then your code should work correctly.

The other option is to limit the size of the draggable li so it fits the destination div.