Add Sortable to pools
This commit is contained in:
parent
2b6b1f30f4
commit
239258e324
5 changed files with 141 additions and 29 deletions
|
|
@ -16,6 +16,36 @@
|
|||
{% if let Some(post) = posts.first() %}
|
||||
<meta property="og:image" content="/files/{{ post.thumbnail }}" />
|
||||
<meta property="twitter:image:src" content="/files/{{ post.thumbnail }}" />
|
||||
{% endif %} {% if can_edit %}
|
||||
<script>
|
||||
htmx.onLoad(function (content) {
|
||||
var sortables = content.querySelectorAll(".sortable");
|
||||
for (var i = 0; i < sortables.length; i++) {
|
||||
var sortable = sortables[i];
|
||||
var sortableInstance = new Sortable(sortable, {
|
||||
animation: 150,
|
||||
ghostClass: "blue-background-class",
|
||||
|
||||
// Make the `.htmx-indicator` unsortable
|
||||
filter: ".htmx-indicator",
|
||||
onMove: function (evt) {
|
||||
return evt.related.className.indexOf("htmx-indicator") === -1;
|
||||
},
|
||||
|
||||
// Disable sorting on the `end` event
|
||||
onEnd: function (evt) {
|
||||
console.log(evt);
|
||||
this.option("disabled", true);
|
||||
},
|
||||
});
|
||||
|
||||
// Re-enable sorting on the `htmx:afterSwap` event
|
||||
sortable.addEventListener("htmx:afterSwap", function () {
|
||||
sortableInstance.option("disabled", false);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue