jquery-ui-rails 可拖放功能不起作用答案

【问题标题】：jquery-ui-rails draggable and droppable function does not workjquery-ui-rails 可拖放功能不起作用
【发布时间】：2015-03-05 12:01:31
【问题描述】：

我正在使用jquery-ui-rails gem。我想实现一个可拖放的简单示例。这是javascript文件：

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

但是当图像被丢弃时，可放置的 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>

应用程序.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require turbolinks
//= require_tree .

/* Developer JS */
//= require welcome

应用程序.css

*= require jquery-ui
 *= require_tree .
 *= require_self

我还预编译了资产

【问题讨论】：

你能发布你的 HTML 吗？
@RichardAE：已添加。请立即检查。谢谢

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

【解决方案1】：

似乎问题出在 CSS 中。显然，可拖动的 li 元素比可放置的 div 大（因为 li 是块大小，而 div 的宽度为 150px）。

请看一下这个example。这表明如果您没有为可放置 div 设置浮动、宽度和高度，如下所示：

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

那么你的代码应该可以正常工作了。

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

【讨论】：