jquery-ui-rails拖放功能不起作用
jquery-ui-rails draggable and droppable function does not work
我正在使用 jquery-ui-rails gem。
我想实现一个简单的可拖放的例子。这是 javascript 文件:
$('.draggable_images').draggable();
$('#droppable1').droppable({
drop: function(event,ui){
$(this).addClass("ui-state-highlight").find("p").html("Added!");
}
});
但是当放置图像时,可放置的 p 标签的内容不会改变。当我在 fiddle 中尝试时,相同的代码起作用了。我虽然这可能是 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
我也预编译了资源
看来问题出在 CSS。显然,可拖动的 li 元素大于可放置的 div(因为 li 是块大小,而 div 的宽度为 150px)。
请看看这个example。这表明如果您没有为可放置的 div 设置浮动、宽度和高度,就像这样:
#droppable1 { padding: 0.5em; margin: 10px; border-style: solid; }
那么您的代码应该可以正常工作。
另一种选择是限制可拖动 li 的大小,使其适合目标 div。
我正在使用 jquery-ui-rails gem。 我想实现一个简单的可拖放的例子。这是 javascript 文件:
$('.draggable_images').draggable();
$('#droppable1').droppable({
drop: function(event,ui){
$(this).addClass("ui-state-highlight").find("p").html("Added!");
}
});
但是当放置图像时,可放置的 p 标签的内容不会改变。当我在 fiddle 中尝试时,相同的代码起作用了。我虽然这可能是 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
我也预编译了资源
看来问题出在 CSS。显然,可拖动的 li 元素大于可放置的 div(因为 li 是块大小,而 div 的宽度为 150px)。
请看看这个example。这表明如果您没有为可放置的 div 设置浮动、宽度和高度,就像这样:
#droppable1 { padding: 0.5em; margin: 10px; border-style: solid; }
那么您的代码应该可以正常工作。
另一种选择是限制可拖动 li 的大小,使其适合目标 div。