Sortable

Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering

HOME | Explain | Code | Htmx Docs | Full screen 
import time
from fasthtml.common import Article, Div, Form, Input, SortableJS, fast_app

app, rt = fast_app(hdrs=[SortableJS()])


@app.get
def page():
    return (
        Form(cls="sortable", hx_post="/items", hx_target="#logs", hx_trigger="end")(
            Div(cls="htmx-indicator")("Updating..."),
            *[Article(Input(type="hidden", name="item", value=i), f"Item {i}") for i in range(1, 6)],
        ),
        Div(id="logs"),
    )


@app.post
def items(item: list[str]):
    time.sleep(0.5)
    return f"Order: {', '.join(item)}"

Server Calls