https://www.ibicasa.com/assets/controllers/draggable_controller-bbfce71f.js

1import { Controller } from "@hotwired/stimulus";
2import Sortable from "sortablejs";
3
4export default class extends Controller {
5  static targets = ["component"];
6
7  connect() {
8    console.log("connected");
9
10    console.log(this.element);
11    new Sortable(this.element, {
12      onEnd: this.updateOrders.bind(this),
13      // onEnd: function (evt) {
14      //   var itemEl = evt.item; // the current dragged HTMLElement
15      //   console.log("moved", itemEl);
16      //   // You can use this event to update the order in your form or directly save the order
17      // },
18    });
19  }
20
21  updateOrders() {
22    this.componentTargets.forEach((component, index) => {
23      const photoId = component.dataset.photoId;
24      const orderField = document.getElementById(`photo_order_${photoId}`);
25      if (orderField) {
26        orderField.value = photoId; // Update the order field with the new index
27      }
28    });
29    console.log("Orders updated");
30  }
31}