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

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

本文关键字：函数 不起作用 dropable draggable jquery-ui-rails      更新时间：2023-09-26

我使用的是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 rail的版本是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

应用.css

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

我还预编译了资产

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

请看一下这个例子。这表明，如果您没有为可丢弃的div设置float、width和height，如下所示：

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

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

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

相关文章：