Change unit base with drag and drop

app/views/units/_unit.html.erb

@@ -1,4 +1,6 @@
-<tr id="<%= dom_id(unit) %>">
+<%= tag.tr id: dom_id(unit), ondragover: "dragOver(event)", ondrop: "drop(event)",
+  data: {drag_path: unit_path(unit), drop_id: unit.base_id || unit.id} do %>
+
   <td class="<%= class_names('link', {subunit: unit.base}) %>">
     <%= link_to unit.symbol, edit_unit_path(unit), id: dom_id(unit, :edit),
       onclick: 'this.blur();', data: {turbo_stream: true} %>
@@ -17,5 +19,10 @@
       <%= image_button_to t(".delete_unit"), "delete-outline", unit_path(unit),
         method: :delete %>
     </td>
+    <% if unit.movable? %>
+      <td class="handle" draggable="true" ondragstart="dragStart(event)">&#x283F</td>
+    <% else %>
+      <td></td>
+    <% end %>
   <% end %>
-</tr>
+<% end %>

app/views/units/index.html.erb

@@ -15,6 +15,7 @@
       <th><%= User.human_attribute_name(:multiplier).capitalize %></th>
       <% if current_user.at_least(:active) %>
         <th><%= t :actions %></th>
+        <th></th>
       <% end %>
     </tr>
   </thead>
@@ -29,4 +30,36 @@
       event.target.closest("tr").querySelector("a[name=cancel]").click();
     }
   }
+
+  function dragStart(event) {
+    var row = event.target.closest("tr");
+    event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"));
+    var rowRectangle = row.getBoundingClientRect();
+    event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top);
+    event.dataTransfer.dropEffect = "none";
+  }
+
+  function dragOver(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }
+
+  function drop(event) {
+    event.preventDefault();
+
+    var params = new URLSearchParams();
+    params.append("unit[base_id]", event.target.closest("tr").getAttribute("data-drop-id"));
+
+    fetch(event.dataTransfer.getData("text/plain"), {
+      body: params,
+      headers: {
+        "Accept": "text/vnd.turbo-stream.html",
+        "X-CSRF-Token": document.head.querySelector("meta[name=csrf-token]").content,
+        "X-Requested-With": "XMLHttpRequest"
+      },
+      method: "PATCH"
+    })
+    .then(response => response.text())
+    .then(html => Turbo.renderStreamMessage(html))
+  }
 <% end %>