ドラッグ＆ドロップでマッピングを行うUI

ドラッグ＆ドロップ機能を使って紐づけを行う際のUIを作ってみました。
ドラッグで`<input type="hidden" name="mapping[]" value="XXXXX">`を`form`タグ内に配置しているだけです。

<p data-height="400" data-theme-id="0" data-slug-hash="Wzqgrb" data-default-tab="html,result" data-user="horikeso" data-embed-version="2" data-pen-title="D＆D MAPPING UI" class="codepen">See the Pen <a href="https://codepen.io/horikeso/pen/Wzqgrb/">D＆D MAPPING UI</a> by horikeso (<a href="https://codepen.io/horikeso">@horikeso</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>D＆D</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* このページではテキスト等のドラッグを禁止する */
* {
  user-select: none;
}
.d-flex td {
  min-height: calc(.75rem * 2 + 20px);
}
</style>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function dragStart(event){
    event.dataTransfer.setData("text", event.target.outerHTML);
}

function dragOver(event){
    event.preventDefault();
}

function drop(event){
    var html = event.dataTransfer.getData("text");
    event.currentTarget.innerHTML = html;
    event.preventDefault();
}
</script>
</head>
<body>
<div>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-1">
            <table class="table table-striped table-bordered">
                <tr>
                    <td>
                        <div style="background-color: red; height: 20px; width: 20px; cursor: pointer;" draggable="true" ondragstart="dragStart(event)">
                            <input type="hidden" name="mapping[]" value="red">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="background-color: blue; height: 20px; width: 20px; cursor: pointer;" draggable="true" ondragstart="dragStart(event)">
                            <input type="hidden" name="mapping[]" value="blue">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="background-color: green; height: 20px; width: 20px; cursor: pointer;" draggable="true" ondragstart="dragStart(event)">
                            <input type="hidden" name="mapping[]" value="green">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col">
            <form method="POST">
                <table class="table table-striped table-bordered">
                    <tr class="d-flex">
                        <th class="col-3"></th>
                        <th class="col-9">色設定</td>
                    </tr>
                    <tr class="d-flex">
                        <td class="col-3">パーツA</td>
                        <td class="col-9" ondragover="dragOver(event)" ondrop="drop(event)"></td>
                    </tr>
                    <tr class="d-flex">
                        <td class="col-3">パーツB</td>
                        <td class="col-9" ondragover="dragOver(event)" ondrop="drop(event)"></td>
                    </tr>
                    <tr class="d-flex">
                        <td class="col-3">パーツC</td>
                        <td class="col-9" ondragover="dragOver(event)" ondrop="drop(event)"></td>
                    </tr>
                </table>
                <div class="col text-center">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
        <div class="col-2"></div>
    </div>
</div>
</body>
</html>
```

# 参考

[ドラッグ＆ドロップ](http://www.htmq.com/dnd/)