javascript - Rails - 向上/向下按钮保存到数据库
问题描述
我正在尝试实现拖放到我的应用程序,该应用程序正在使用 jquery-ui 在桌面浏览器上运行。
我无法让它在触摸设备上工作,因为爱和金钱,我想实现向上/向下按钮。我已经完成了这项工作,但是无法弄清楚如何保存到数据库中。
看法
<ul class="products-list product-list-in-box" id="activity" data-url="<%= pages_sort_path %>" >
<% @todays_customers.each do |today| %>
<li class="" id="activity_<%= today.activity_id %>">
<div> <i class="fa fa-reorder"></i>
<span class="pull-right">
[ <a href="#" class="up_sub" id="1_3">Up</a> ]
[ <a href="#" class="down_sub" id="1_3">Down</a> ]
<% if today.activity_type == 'Journey Day' %>
<span class="label bg-red"><%= link_to "x", customer_activity_path(today.customer_id, today.activity_id), method: :delete, data: { confirm: 'Are you sure?' } %></span>
<% end %>
</span>
</div>
</li>
<% end %>
</ul>
JS
<script>
$( function() {
$( "#activity" ).sortable({
axis: "y",
update: function(e, ui) {
$.ajax({
url: $(this).data("url"),
type: "PATCH",
data: $(this).sortable('serialize')
})
}
});
$( "#activity" ).disableSelection();
} );
$('.up_sub').click(function(){
var li = $(this).closest('li');
var prev = li.prev();
if(prev.length){
li.detach().insertBefore(prev);
}
;
console.log($(this))
});
$('.down_sub').click(function(){
var li = $(this).closest('li');
var next = li.next();
if(next.length){
li.detach().insertAfter(next);
}
;
console.log($(this))
});
</script>
控制器
def sort
params[:activity].each_with_index do |id, index|
Activity.where(id: id).update_all(position: index + 1)
end
head :ok
end
我试图找出一种方法来复制拖放后按顺序发送每个 li 条目 id 的参数的方式。有什么想法吗?
谢谢
解决方案
我想推荐你使用acts_at_list gem。因此,您需要做的所有事情就是使用update
操作并传递position
要拖放的记录的新值。acts_at_list
然后将处理其余的。
推荐阅读
- angular - 无法使用带有 ngClass 绑定的可观察对象来更新视图
- python - 增加 Pytorch 神经网络的数据集的 batch_size
- python - 如何修复:coreml 模型从 coremltools 转换多类 xgboost 模型产生看似随机的输出,python 3.7?
- angular - ActivatedRoute 不会在路由更改时更新子路由数据
- python - 在Python中划分数组以获得混淆矩阵
- c++ - 另一个类模板特化(在布尔参数上)
- html - 关键帧开始时意外下降
- python - 从 Windows 应用程序拦截文件路径
- java - Java:如何从第二种方法中获取变量以在第三种方法中工作?
- apache-kafka - 使用 @KafkaListener 和侦听器 ack-mode 设置为记录的 Spring Kafka 轮询