sortable_position.scss

.sortable-position {
  &__draggable {
    &-handler {
      cursor: move;
    }

    &-ghost {
      border: 1px dashed $gray-400;
      background: #fffce4;
    }
  }
}

sortable_position_controller.js

import {Controller} from "stimulus"
import Sortable from 'sortablejs';

export default class extends Controller {
  static targets = ["position"]

  connect() {
    let sortable = new Sortable(this.element, {
      animation: 150,
      swapThreshold: 0.65,
      handle: '.sortable-position__draggable-handler',
      ghostClass: 'sortable-position__draggable-ghost',
      draggable: '.sortable-position__draggable-item',
      onEnd: (_e) => {
        let i = 0;
        this.positionTargets.forEach((el) => {
          el.value = i++;
        });
      }
    });
  }
}

view.html.erb

<div data-controller="sortable-position">
  <%= form.fields_for :uploads do |ff| %>
    <div class="sortable-position__draggable-item">
      <div class="d-flex">
        <%= tag.span svg_icon("move", class: "mr-0"), class: "btn btn-link text-muted sortable-position__draggable-handler" %>
        <%= form.hidden_field :position, "data-target": "sortable-position.position" %>
        ...
      </div>
    </div>
  <% end %>
</div>