jquery-ui-rails draggable和droppable函数不起作用

时间:2015-03-05 12:01:32

标签: javascript jquery ruby-on-rails jquery-ui jquery-ui-draggable

我正在使用jquery-ui-rails gem。 我想实现一个简单的draggable和droppable示例。这是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

我还预编译了资产

1 个答案:

答案 0 :(得分:2)

似乎问题出在CSS中。显然,可拖动的li元素比droppable div大(因为li是块大小,div的宽度是150px)。

请查看此example。这表明如果你没有设置droppable div的浮点数,宽度和高度,就像这样:

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

然后你的代码应该正常工作。

另一个选项是限制可拖动li的大小,使其适合目标div。