itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-27 13:01:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sortable example fixes (#1868)

Browse Source 
* add missing quotation mark

* make `.htmx-indicator` unsortable

* change cursors to indicate grabbable items

* bug fix:

bug:
when an item is dragged fast enough before the previous request was
completed, dropping after request completion resulted in the addition
of an extra item to the list.

fix:
disable sortable on End event, and re-enable it on htmx:afterSwap.

* add a few inline  comments + better naming
This commit is contained in:
Mohamed Haddi 2023-10-09 22:28:49 +01:00 committed by GitHub
parent 76e0ca1216
commit f0ad4690d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
www/content/examples/sortable.md
View File

@ -13,9 +13,25 @@ htmx.onLoad(function(content) {
var sortables = content.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i];
new Sortable(sortable, {
var sortableInstance = new Sortable(sortable, {
animation: 150,
ghostClass: 'blue-background-class'
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) {
this.option("disabled", true);
}
});
// Re-enable sorting on the `htmx:afterSwap` event
sortable.addEventListener("htmx:afterSwap", function() {
sortableInstance.option("disabled", false);
});
}
})
@ -54,9 +70,25 @@ That's it!
var sortables = content.querySelectorAll(".sortable");
for (var i = 0; i < sortables.length; i++) {
var sortable = sortables[i];
new Sortable(sortable, {
var sortableInstance = new Sortable(sortable, {
animation: 150,
ghostClass: 'blue-background-class'
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) {
this.option("disabled", true);
}
});
// Re-enable sorting on the `htmx:afterSwap` event
sortable.addEventListener("htmx:afterSwap", function() {
sortableInstance.option("disabled", false);
});
}
})
@ -64,7 +96,7 @@ That's it!
var listItems = [1, 2, 3, 4, 5]
// routes
init("/demo", function(request, params){
return '<form id=example1" class="list-group col sortable" hx-post="/items" hx-trigger="end">' +
return '<form id="example1" class="list-group col sortable" hx-post="/items" hx-trigger="end">' +
listContents()
+ "\n</form>";
});
@ -77,8 +109,8 @@ That's it!
// templates
function listContents() {
return '<div class="htmx-indicator">Updating...</div>' + listItems.map(function(val) {
return " <div style='border:1px solid #DEDEDE; padding:12px; margin: 8px; width:200px' ><input type='hidden' name='item' value='" + val + "'/> Item " + val +"</div>";
return '<div class="htmx-indicator" style="cursor: default">Updating...</div>' + listItems.map(function(val) {
return ` <div style="border:1px solid #DEDEDE; padding:12px; margin: 8px; width:200px; cursor: grab" ondrag="this.style.cursor = 'grabbing'" ><input type="hidden" name="item" value="` + val + `"/> Item ` + val + `</div>`;
}).join("\n");
}