https://my.broadstreetads.com/assets/controllers/sortable_list_con…1657823cf49ceb85bd7942844cf2761703733742.js

1import { Controller } from "@hotwired/stimulus"
2import Sortable from "sortablejs"
3
4export default class extends Controller {
5    static targets = ["container"]
6
7    connect() {
8        this.sortable = Sortable.create(this.containerTarget, {
9            handle: "[data-sortable-handle]",
10            draggable: "[data-sortable-item]",
11            animation: 150,
12            ghostClass: "opacity-50",
13            onEnd: () => this.updateSortOrder()
14        })
15
16        // Inserted rows carry a placeholder sort_order; without this they all tie.
17        this.observer = new MutationObserver(() => this.updateSortOrder())
18        this.observer.observe(this.containerTarget, { childList: true })
19    }
20
21    updateSortOrder() {
22        let index = 0
23        this.containerTarget.querySelectorAll("[data-sortable-item] [data-sort-input]").forEach((input) => {
24            input.value = index++
25        })
26    }
27
28    disconnect() {
29        if (this.sortable) this.sortable.destroy()
30        if (this.observer) this.observer.disconnect()
31    }
32};