可排序与可拖动的 jQuery 和 Rails

Posted 2023-05-08

【中文标题】可排序与可拖动的 jQuery 和 Rails

【英文标题】：Sortable vs draggable jQuery and Rails

【发布时间】：2016-06-07 16:24:42

【问题描述】：

感谢阅读。

我的 rails 网页有许多按钮和链接。这些根据 div 类很好地排序。当我使用jQuery的可拖动功能时，我可以隔离一个提交链接，并拖动它。按钮、链接等都作为一个整体保持在一起。完美！

如果我将“可拖动”一词更改为“可排序”以获得我真正想要的效果，那么我的 div 提供的功能会发生变化。一个帖子的组件不再绑定在一起。 upvote按钮未附加到链接，未附加到downvote按钮等。

我会提供图片和代码来帮助解释。我很感激任何建议。谢谢。

post 组件作为一个单元拖动

帖子组件在自己的帖子中单独排序。添加边框以明确发生了什么。当然，目标是对整个帖子进行排序，而不仅仅是组件，将它们上下移动。

<script src="/javascripts/jQueryUI.js"></script>
<script type="text/javascript" language="javascript">

$(function () 
$(".individual_link").sortable();
);
</script>


<div class="summary_title">
<th>Page Title.</th><br><br>
</div>

<div class="all_submission_links">
<% @submissions.each do |submission| %>

    <div class="individual_link">
    <%= link_to submission.summary, submission, :id =>       "individual_link" %>

  <% #Had to use try method because if email is nil (user delted   account) program will crash. %>
  <div class="submission_dates"><p>Submitted <%= time_ago_in_words(submission.created_at) %> ago by <%= submission.user.try(:username) %></p>
  </div>
   <%= link_to like_submission_path(submission), method: :put, class:   "btn btn-default btn-sm" do %>
    <span class="glyphicon glyphicon-chevron-up"></span>
    Upvote
    <%= submission.get_upvotes.size %>
  <% end %>
  <%= link_to dislike_submission_path(submission), method: :put, class: "btn btn-default btn-sm" do %>
    <span class="glyphicon glyphicon-chevron-down">
    Downvote
    <%= submission.get_downvotes.size %></span>
<% end %>
</div>
<% end %>
</div>

这个排序过程很困难，因为我使用的是 ruby​​ 方法而不是典型的无序列表方法。如本示例所示，我将不胜感激有关如何对帖子进行整体排序的任何建议：https://jqueryui.com/sortable/

再次感谢。

【参考方案1】：

我弄清楚了在这种情况下可拖动和可排序之间的区别。为了使其可排序，我所要做的就是使 all_submission_links 类可排序，而不是 individual_link 类。

希望这对将来使用可拖动和可排序的人有所帮助。