[JAVA] [Rails] Implémentation de la fonction glisser-déposer (avec effet)

Cible

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince ・ Introduction de Bootstrap 3 ・ Mise en œuvre de la fonction de publication

la mise en oeuvre

1. Présentez Gem

Gemfile

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

jquery-ui-rails ➡︎ Rendez l'interface utilisateur jQuery disponible.

gem 'ranked-model' ➡︎ Rendre possible la gestion de l'ordre des livres.

3. Ajouter une colonne

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. Modifiez le modèle

Autoriser l'utilisation de modèle-classé dans les modèles de livre.

book.rb

#Postscript
include RankedModel
ranks :row_order

5. Modifiez le contrôleur

** ① Modifier ʻindex action` **

books_controller.rb

#Changer avant
@books = Book.all

#Après le changement
@books = Book.rank(:row_order)

** ② Ajoutez row_order_position au paramètre strong. ** **

Le nom de la colonne est row_order, mais ici il est décrit comme row_order_position dans le but d'utiliser Gem.

books_controller.rb

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

** ③ Ajouter une action de tri **

books_controller.rb

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

render body: nil ➡︎ N'effectuez que des actions, n'appelez pas de vues.

6. Modifier le routage

route.rb

#Changer avant
resources :books

#Après le changement
resources :books do
  put :sort
end

7. Modifier la vue

slim:books/index.html.slim

/ 「table-Accorder une classe appelée "triable"
table.table.table-bordered.table-sortable
  thead
    tr
      th
        |Donateur
      th
        |Titre
      th
        |Texte
      th

  tbody
    - @books.each do |book|
      /Attribuer une classe à la balise tr et définir les données
      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 'Effacer', book, method: :delete, data: { confirm: '本当にEffacerしてもよろしいですか？' }, class: 'btn-sm btn-danger'

model_name: book.class.name.underscore ➡︎ "livre" correspond à chaque variable de bloc.

8. Editez ʻapplication.js`

application.js

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

//= require jquery-ui/widgets/sortable ➡︎ Activer l'interface utilisateur jQuery

//= require jquery-ui/effects/effect-highlight ➡︎ Activer les effets de glisser-déposer

9. Créer / modifier un fichier JavaScript

Terminal

$ touch app/assets/javascripts/table_sort.js

table_sort.js

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

  //Envoyer les données de commande au contrôleur avec Ajax
  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,
    });
  },

  //Ajuster la largeur de glissement au tableau
  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);
  },

  //Ajouter un effet
  stop(e, ui) {
    return ui.item.children('td').effect('highlight');
  },
});

10. Changer la conception du curseur

application.scss

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