基于jquery sortable更新排名

Question

我正在尝试使用 jquery-sortable 更新房价排名。我正在遵循这个例子https://gorails.com/episodes/sortable-drag-and-drop的方法。

目标 room_prices 可以拖放，目标是相应地更新rank。

问题 每次我移动价格时都会触发控制器操作sort，但新订单/排名似乎没有正确传输到控制器。

=> 我的控制器操作中的index 仍然是页面开始的索引，而不是拖放操作之后的索引。

索引

<div id="room-price-index" data-url="<%= sort_room_category_room_prices_path(@room_category) %>">
<% @room_prices.each do |price| %>
  <%= link_to edit_room_price_path(price), id: dom_id(price) do %>
   <div class="item"><%= price.name %></div>
  <% end %>
<% end %>
</div>

app/assets/javascripts/room_price.js

document.addEventListener("turbolinks:load", function() {
  $("#room-price-index").sortable({
    update: function(e, ui) {
      console.log(e) 
      console.log(ui) 
      console.log(this)
      console.log($(this).sortable('serialize'));
      Rails.ajax({
        url: $(this).data("url"),
        type: "PATCH",
        data: $(this).sortable('serialize'),
      });
    }
  });
});

输出console.log(e)

 => 
jQuery.Event {originalEvent: j…y.Event, type: "sortupdate", timeStamp: 7277.559999958612, jQuery112403961329860286955: true, isDefaultPrevented: ƒ, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelable: true
clientX: 783
clientY: 365
ctrlKey: false
currentTarget: document
data: null
delegateTarget: document
detail: 1
eventPhase: 3
fromElement: null
handleObj: {type: "mouseup", origType: "mouseup", data: null, guid: 30, handler: ƒ, …}
isDefaultPrevented: ƒ returnFalse()
isTrigger: 3
jQuery112403961329860286955: true
metaKey: false
namespace: ""
offsetX: 523
offsetY: 39
originalEvent: jQuery.Event {originalEvent: MouseEvent, type: "mouseup", timeStamp: 7277.559999958612, jQuery112403961329860286955: true, isDefaultPrevented: ƒ, …}
pageX: 783
pageY: 581
relatedTarget: null
result: undefined
rnamespace: null
screenX: 783
screenY: 444
shiftKey: false
target: div#acco-price-index.ui-sortable
timeStamp: 7277.559999958612
toElement: div.room-price-info
type: "sortupdate"
view: Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
which: 1
__proto__: Object

输出控制台.log(ui)

=>
{helper: null, placeholder: jQuery.fn.init(1), position: {…}, originalPosition: {…}, offset: {…}, …}
helper: null
item: jQuery.fn.init [div.card-room-prices.ui-sortable-handle, context: div.card-room-prices.ui-sortable-handle]
offset: {top: 539.4375, left: 222}
originalPosition: {top: 533.4375, left: 15}
placeholder: jQuery.fn.init [div.card-room-prices.ui-sortable-handle.ui-sortable-placeholder, selector: "", context: undefined]
position: {top: 391.4375, left: 16.609375}
sender: null
__proto__: Object

输出 console.log(this)

<div id="acco-price-index" data-url="/room_categories/10/room_prices/sort" class="ui-sortable">

  <a id="room_price_43" href="/room_prices/43/edit" class="ui-sortable-handle">
  </a><div class="card-room-prices ui-sortable-handle"><a id="room_price_43" href="/room_prices/43/edit">

    <div class="room-price-info">
    <div class="room-price-info-item">ppppppp</div>
    <div class="room-price-info-item">€3.00</div>
    <div class="room-price-info-item"> 31-01-2020 </div>
    <div class="room-price-info-item">  6-03-2020 </div>
    </div>

    </a><div class="card-room-prices-actions"><a id="room_price_43" href="/room_prices/43/edit">
      <!-- <div class="card-room-prices-actions-item">
        <p><i class="fas fa-edit"></i> Price details </p>
      </div> -->

      </a><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/43">
      <div class="card-room-prices-actions-item">
        <p><i class="fas fa-trash"></i> delete</p>
      </div>
</a>    </div>
</div>

  <a id="room_price_41" href="/room_prices/41/edit" class="ui-sortable-handle">
  </a><div class="card-room-prices ui-sortable-handle" style=""><a id="room_price_42" href="/room_prices/42/edit">

    <div class="room-price-info">
    <div class="room-price-info-item">fdsfsdfdsf</div>
    <div class="room-price-info-item">€5.00</div>
    <div class="room-price-info-item"> 15-12-2019 </div>
    <div class="room-price-info-item"> 31-12-2019 </div>
    </div>

    </a><div class="card-room-prices-actions"><a id="room_price_42" href="/room_prices/42/edit">
      <!-- <div class="card-room-prices-actions-item">
        <p><i class="fas fa-edit"></i> Price details </p>
      </div> -->

      </a><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/42">
      <div class="card-room-prices-actions-item">
        <p><i class="fas fa-trash"></i> delete</p>
      </div>
</a>    </div>
</div><div class="card-room-prices ui-sortable-handle"><a id="room_price_41" href="/room_prices/41/edit">

    <div class="room-price-info">
    <div class="room-price-info-item">Rob II</div>
    <div class="room-price-info-item">€5.00</div>
    <div class="room-price-info-item"> 15-12-2019 </div>
    <div class="room-price-info-item"> 31-12-2019 </div>
    </div>

    </a><div class="card-room-prices-actions"><a id="room_price_41" href="/room_prices/41/edit">
      <!-- <div class="card-room-prices-actions-item">
        <p><i class="fas fa-edit"></i> Price details </p>
      </div> -->

      </a><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/room_prices/41">
      <div class="card-room-prices-actions-item">
        <p><i class="fas fa-trash"></i> delete</p>
      </div>
</a>    </div>
</div>

  <a id="room_price_42" href="/room_prices/42/edit" class="ui-sortable-handle">
  </a>
  </div>

console.log($(this).sortable('serialize'));

room_price[]=43&room_price[]=41&room_price[]=42

控制器

def sort
  params[:room_price].each_with_index do |id, index|
    binding.pry
    # id => "43"
    # index => "0"
    # RoomPrice.where(id: id) => [#<RoomPrice:797987897 .....rank:1>] 
    RoomPrice.where(id: id).update_all(rank: index + 1)
    binding.pry
    # id => "43"
    # index => "0"
    # RoomPrice.where(id: id) => [#<RoomPrice:797987897 .....rank:1>]
  end

  skip_authorization
  head :ok
end

Answer 1

发现错误，我以为我正确包装了所有价格项目，但我不小心也包含了一些不是价格项目的项目。谢谢大家的帮助。