Восстановить Jquery Droppable В зависимости от состояния на сервере rails - PullRequest
Новая
       11

Восстановить Jquery Droppable В зависимости от состояния на сервере rails

0 голосов
/ 23 октября 2018

В настоящее время я работаю над шахматным приложением Rails.Я пытался выяснить лучший способ реализации перетаскивания Jquery для обновления частей при перемещении.Я был в состоянии успешно перемещать части на стороне клиента и использовать ajax для обновления БД с новыми позициями.Моя проблема в том, что я хочу проверить, являются ли ходы действительными, используя методы фигуры, которые есть у меня на стороне бэкенда, и, если они недействительны, вернуть фигуру обратно в исходное положение.

pieceMove.js 

$(function() {

  // Draggable piece
  $('.piece_image').draggable({revert:true})

  // Droppable area that accepts piece image
  $('td').droppable({
    accept: '.piece_image',
    revert: true,
    drop: function(event, ui) {
      var piece_id = ui.helper[0].id;

      that = this

      // Sends the move's params to the update action in pieces controller
      $.ajax({
        type: 'PUT',
        dataType: 'script',
        url: '/update',
        data: { position_x: $(event.target).data('col'),
        position_y: $(event.target).data('row'), 
        piece_id: piece_id }
      })

      // Release piece to location moved to
      $(ui.draggable).detach().css({ top: 0, left: 0 }).appendTo(that);
    }
  })
})

piece_controller.rb 

class PiecesController < ApplicationController

  def update
    @piece = Piece.find(params[:piece_id])

    # Updated piece positions
    x = params[:position_x].to_i
    y = params[:position_y].to_i

    if @piece.valid_move?(x, y)
      # Update database with current piece position
      @piece.update_attributes(position_x: x, position_y: y)
    else
      puts 'Invalid Move'
    end
  end

end

game / show.html.erb 

<div class= "booyah-box col-10 offset-1">
  <div class="center">
    <h3>Game Show Page</h3>
    <%= link_to 'Home', root_path, class: 'btn btn-primary' %>
  </div>

    <div class="board-container">
      <table id="board" data-game_id="<%= @game.id %>">
          <% 8.times.each do |row| %>
          <tr id="row">
            <% 8.times.each do |col| %>
              <% piece = @game.pieces.where(position_x: col, position_y: row).first %>
              <td data-row="<%= row %>" data-col="<%= col %>">
                <% if piece.present? %>
                  <div class="piece_image" data-piece_id="<%= piece.id %>" data-piece_name="<%= piece.color %>_<%= piece.type %>" id="<%= piece.id %>" data-row="<%= row %>" data-col="<%= col %>">
                    <% image ="#{piece.color}_#{piece.type}.png" %>
                    <%= image_tag(image) %>
                  </div>
                <% end %>
              </td>
            <% end %>
          </tr>
          <% end %>
      </table>
    </div>
  </div>
</div>

route.rb 

Rails.application.routes.draw do

  devise_for :users
  root 'static_pages#index'

  put 'update', to: 'pieces#update'
  resources :games do
    resources :pieces, only: [:new, :create, :show, :index]  do
        put 'move', to: 'pieces#move'
    end
  end
end

Я пытаюсь выяснить, есть ли способ использовать имеющиеся у меня методы на бэкэнде для проверки кусков на стороне клиента, поэтому отбрасывание не произойдет, еслинедействительным.Любая помощь будет принята с благодарностью.

...