[JAVA] [Rails] Implementierung der Drag & Drop-Funktion (mit Wirkung)

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Einführung von Bootstrap 3 ・ Implementierung der Posting-Funktion

Implementierung

1. Stellen Sie Gem vor

Gemfile

#Nachtrag
gem 'jquery-ui-rails'
gem 'ranked-model'

jquery-ui-rails ➡︎ Stellen Sie die jQuery-Benutzeroberfläche zur Verfügung.

gem 'ranked-model' ➡︎ Ermöglichen Sie die Verwaltung der Reihenfolge der Bücher.

3. Spalte hinzufügen

Terminal

$ rails g migration AddRowOrderToBooks row_order:integer

Terminal

$ bundle

schema.rb

create_table "books", force: :cascade do |t|
  t.integer "user_id"
  t.string "title"
  t.text "body"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
  t.integer "row_order"
end

4. Bearbeiten Sie das Modell

Erlauben Sie, dass "Rangmodell" in Buchmodellen verwendet wird.

book.rb

#Nachtrag
include RankedModel
ranks :row_order

5. Bearbeiten Sie den Controller

** ① Indexaktion bearbeiten **

books_controller.rb

#Vorher ändern
@books = Book.all

#Nach der veränderung
@books = Book.rank(:row_order)

** ② Fügen Sie dem starken Parameter row_order_position hinzu. ** ** **

Der Spaltenname lautet "row_order", wird hier jedoch als "row_order_position" für die Verwendung von Gem beschrieben.

books_controller.rb

def book_params
  params.require(:book).permit(:title, :body, :row_order_position)
end

** ③ Sortieraktion hinzufügen **

books_controller.rb

def sort
  book = Book.find(params[:book_id])
  book.update(book_params)
  render body: nil
end

render body: nil ➡︎ Führen Sie nur Aktionen aus, rufen Sie keine Ansichten auf.

6. Bearbeiten Sie das Routing

route.rb

#Vorher ändern
resources :books

#Nach der veränderung
resources :books do
  put :sort
end

7. Ansicht bearbeiten

slim:books/index.html.slim

/ 「table-Gewähren Sie eine Klasse namens "sortierbar"
table.table.table-bordered.table-sortable
  thead
    tr
      th
        |Mitwirkender
      th
        |Titel
      th
        |Text
      th

  tbody
    - @books.each do |book|
      /Weisen Sie dem tr-Tag eine Klasse zu und legen Sie die Daten fest
      tr.item(data = { model_name: book.class.name.underscore, update_url: book_sort_path(book) })
        td
          = link_to book.user  do
            = book.user.name
        td
          = link_to book.title, book_path(book)
        td
          = book.body
        td
          -if book.user == current_user
            = link_to 'Löschen', book, method: :delete, data: { confirm: '本当にLöschenしてもよろしいですか？' }, class: 'btn-sm btn-danger'

model_name: book.class.name.underscore ➡︎ "Buch" entspricht jeder Blockvariablen.

8. Bearbeiten Sie application.js

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require jquery-ui/widgets/sortable //Nachtrag
//= require jquery-ui/effects/effect-highlight //Nachtrag
//= require bootstrap-sprockets
//= require_tree .

//= require jquery-ui/widgets/sortable ➡︎ Aktivieren Sie die jQuery-Benutzeroberfläche

//= require jquery-ui/effects/effect-highlight ➡︎ Aktivieren Sie Drag & Drop-Effekte

9. Erstellen / bearbeiten Sie eine JavaScript-Datei

Terminal

$ touch app/assets/javascripts/table_sort.js

table_sort.js

$('.table-sortable').sortable({
  axis: 'y',
  items: '.item',

  //Bestelldaten mit Ajax an Controller senden
  update(e, ui) {
    let item = ui.item;
    let item_data = item.data();
    let params = { _method: 'put' };
    params[item_data.model_name] = { row_order_position: item.index() };
    $.ajax({
      type: 'POST',
      url: item_data.update_url,
      dataType: 'json',
      data: params,
    });
  },

  //Passen Sie die Ziehbreite an die Tabelle an
  start(e, ui) {
    let cells, tableWidth, widthForEachCell;
    tableWidth = $(this).width();
    cells = ui.item.children('td');
    widthForEachCell = tableWidth / cells.length + 'px';
    return cells.css('width', widthForEachCell);
  },

  //Effekt hinzufügen
  stop(e, ui) {
    return ui.item.children('td').effect('highlight');
  },
});

10. Ändern Sie das Cursor-Design

application.scss

//Nachtrag
.table-sortable {
  tr.item {
    cursor: row-resize;
  }
}