https://serranopolis.pr.gov.br/assets/controllers/image_controller

1import { Controller } from "@hotwired/stimulus";
2
3import Sortable from "sortablejs";
4import { FetchRequest } from "@rails/request.js";
5
6// Connects to data-controller="sortable"
7export default class extends Controller {
8  static values = {
9    url: String,
10  };
11
12  connect() {
13    console.log("Sortable controller connected");
14    this.sortable = Sortable.create(this.element, {
15      animation: 150,
16      handle: ".bi-list",
17      ghostClass: "sortable-ghost",
18      chosenClass: "sortable-chosen",
19      dragClass: "sortable-drag",
20      onEnd: this.end.bind(this),
21    });
22  }
23
24  async end(event) {
25    console.log("Sortable onEnd triggered" + this.urlValue);
26
27    const request = new FetchRequest(
28      "patch",
29      `${this.urlValue}?old_position=${event.oldIndex + 1}&new_position=${
30        event.newIndex + 1
31      }`
32    );
33    const response = await request.perform();
34    console.log(response);
35  }
36};