ドラッグ＆ドロップ機能を使って紐づけを行う際のUIを作ってみました。
ドラッグで<input type="hidden" name="mapping[]" value="XXXXX">をformタグ内に配置しているだけです。
See the Pen D＆D MAPPING UI by horikeso (@horikeso) on CodePen.
<!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>