a11yist/app/javascript/controllers/drag_controller.js
david 7acc0559ae
Some checks failed
/ Run tests (push) Failing after 15s
/ Run system tests (push) Failing after 14s
/ Build, push and deploy image (push) Has been skipped
Make checklist entries sortable by d&d
2024-10-27 22:37:11 +01:00

38 lines
975 B
JavaScript

import { Controller } from "@hotwired/stimulus"
import Sortable from "sortablejs"
import { put } from "@rails/request.js";
// Connects to data-controller="drag"
export default class extends Controller {
static values = {
group: String
}
connect() {
this.element.style.cursor = "grab"
new Sortable(this.element, {
group: this.groupValue,
onEnd: this.onEnd,
animation: 150,
swap: true,
swapThreshold: 0.65,
ghostClass: 'dragFrom',
swapClass: 'dragTo',
forceFallback: false,
})
}
onEnd(event) {
const position = event.newIndex + 1
const url = event.item.dataset["sortableUrl"]
// Expect backend to update list items via turbo if necessary
put(url, {
body: JSON.stringify({ checklist_entry: { position: position }}),
contentType: "application/json",
headers: {
"Accept": "text/vnd.turbo-stream.html, text/html, application/xhtml+xml"
}
})
}
}