はじめに

HTMLのdraggable属性をRailsと組み合わせたサンプルを作成したのでメモとして残しておきます。

参考にしたサイト

サンプルの作成にあたって下記のサイトを参考にさせていただきました。

意外と知らないHTML5 API - Drag & Drop APIとは | CodeGrid
[HTML5] Drag & Drop API おさらい「DOM 要素の DnD」｜ Developers.IO
jQuery内からRailsのActionを叩く - Qiita

やりたかったこと

テーブル内の行をドラッグ＆ドロップすることで、別のテーブルにデータが追加される

　→　

テーブル

Userテーブル

カラム名	型	説明
name	string	ユーザ名

スクリーンショット撮影時のデータ

| id | name |
| --- | --- | --- |
| 1 | Yamada Taro |
| 2 | Yamada Jiro |
| 3 | Yamada Saburo |

SelectedUserテーブル

カラム名	型	説明
user_id	integer	UserIDを格納する

スクリーンショット撮影時のデータ
操作前

| id | user_id |
| --- | --- | --- |
| 1 | 1 |

操作後

| id | user_id |
| --- | --- | --- |
| 1 | 1 |
| 2 | 2 |

準備

jqueryを利用できる状態にする

Gemfile

gem 'jquery-rails'

app/assets/javascripts/application.js

//= require jquery

Sampleコントローラを作成する

command

$ rails g controller sample index add

routes.rb

get 'sample/index'
post 'sample/add'

テーブルを作成する

command

rails g scaffold User name:string
rails g scaffold SelectedUser user_id:integer
rake db:migrate

Controller

データを一覧表示するView用のメソッドとデータ追加するメソッドを作成

app/controllers/sample_controller.rb

class SampleController < ApplicationController

  protect_from_forgery except: [:add]

  def index
    @users = User.all
    @selected_users = SelectedUser.all
  end

  def add
    selected_user = SelectedUser.new
    selected_user.user_id = params[:id]

    if selected_user.save
      #head 201
      user = User.find(selected_user.user_id)
      hash = {id: user.id, name: user.name}
      require 'json'
      render :json => hash.to_json
    else
      head 500
    end

  end
end

View

ドラッグ＆ドロップ部分の実装はCodeGridさんのサイトに掲載されているサンプルに少しだけ処理を加えたものになっております。

※ドラッグ＆ドロップ後の処理がおそまつですが、そこはおいおい修正することに・・・

app/views/sample/index.html.erb

<h1>Draggable Sample</h1>

<hr>

<!-- SelectedUser一覧をリスト表示 -->
<h2>SelectedUser</h2>

<table border="1" width="300">
  <tr>
    <th>id</th>
    <th>name</th>
  </tr>
  <% Array(@selected_users).each do |selected_user| %>
      <tr>
        <td><%= selected_user.user_id %></td>
        <td><%= User.find(selected_user.user_id).name %></td>
      </tr>
  <% end %>
  <tr>
    <!-- ドロップエリア -->
    <td colspan="3" id="dropzone" class="dropzone"></td>
  </tr>
</table>

<br>

<!-- User一覧をリスト表示 -->
<h2>User</h2>

<table id="list" border="1" width="300">
  <tr>
    <th>id</th>
    <th>name</th>
  </tr>
  <% Array(@users).each do |user| %>
      <!-- rowにドラッグ可能(draggable)属性を指定 -->
      <tr class="item" draggable="true" id="<%= user.id %>">
        <td><%= user.id %></td>
        <td><%= user.name %></td>
      </tr>
  <% end %>
</table>


<script>

    $(function () {

        // dropzoneの表示テキストを初期化
        initDropzone();

        // listテーブルのitem行が操作された時のリスナーを設定
        items = document.getElementById('list').getElementsByClassName('item');

        Array.prototype.forEach.call(items, function (item) {
            $(item).on('dragstart', onDragStart);
            $(item).on('dragend', onDragEnd);
        });

        // dropzoneのリスナーを設定
        var $dropzone = $('#dropzone')
            .on('dragover', onDragOver)
            .on('dragenter', onDragEnter)
            .on('dragleave', onDragLeave)
            .on('drop', onDrop);


        // dropzoneの表示テキストを指定
        function initDropzone() {
            $('#dropzone').text("ここにドロップできます。");
        }

        function startDropzone() {
            $('#dropzone').text("ドラッグ中。");
        }

        function endDropzone(name) {
            $('#dropzone').text(name + "をドロップしました。");
        }

        // ドロップ時の処理
        // (1) ドロップされた行のidをPOSTする
        // (2) 成功したらリダイレクトする
        // (3) 失敗したらダイアログを表示する
        function doAction(id) {
            $.ajax({
                url: "<%=  sample_add_path  %>",
                type: "POST",
                data: {
                    id: id
                },
                dataType: "html",
                success: function (data) {
                    //alert("success");

                    // dataにドラッグ＆ドロップした
                    // Userのid, nameがjson形式で
                    // 渡される
                    // console.log(data);
                    // {"id":1,"name":"Yamada Taro"}

                    // 暫定的にページを再読込
                    location.href = "<%= sample_index_path %>"
                },
                error: function (data) {
                    alert("errror");
                }
            });
        }

        // ドラッグ＆ドロップ操作
        function onDragStart(e) {
            var id = e.originalEvent.target.id;
            var name = e.originalEvent.target.cells[1].innerHTML;
            e.originalEvent.dataTransfer.setData('id', id);
            e.originalEvent.dataTransfer.setData('name', name);
            addDraggingEffect();
            startDropzone();
        }

        function onDragEnter(e) {
            addEnterEffect();
        }

        function onDragLeave(e) {
            removeEnterEffect();
        }

        function onDragOver(e) {
            e.preventDefault();
        }

        function onDragEnd(e) {
            resetAllEffect();
        }

        function onDrop(e) {
            e.preventDefault();
            var id = e.originalEvent.dataTransfer.getData('id');
            var name = e.originalEvent.dataTransfer.getData('name');
            endDropzone(name);
            doAction(id);
        }

        function addDraggingEffect() {
            $dropzone.addClass('dragging');
        }

        function removeDraggingEffect() {
            $dropzone.removeClass('dragging');
            initDropzone();
        }

        function addEnterEffect() {
            $dropzone.addClass('dragenter');
        }

        function removeEnterEffect() {
            $dropzone.removeClass('dragenter');
        }

        function resetAllEffect(e) {
            removeDraggingEffect();
            removeEnterEffect();
        }

    });

</script>


<style>

  .dropzone p {
    margin: 0;
    padding: 0;
    background-color: #0000E9;
  }

  .dropzone.small {
    height: 40px;
  }

  .dropzone {
    border: 1px solid #555;
    margin-top: 5px;
    /*width: 246px;*/
    min-height: 100px;
    font-size: 12px;

    text-align: center;
    line-height: 100px;

    color: gray;
    background-color: ghostwhite;
    border-color: gray;
  }

  .dragging {
    color: rgba(0, 0, 0, .4);
    background-color: rgba(0, 0, 255, .1);
    border-color: rgba(0, 0, 255, .3);
  }

  .dragging:after {
  }

  .dragenter {
    border-color: rgba(255, 0, 0, .3);
    background-color: rgba(255, 0, 0, .1);
  }

</style>