# sortable_js


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

------------------------------------------------------------------------

<a
href="https://github.com/cj-mills/cjm-fasthtml-sortable-queue/blob/main/cjm_fasthtml_sortable_queue/sortable_js.py#L15"
target="_blank" style="float:right; font-size:smaller">source</a>

### sortable_js_headers

``` python

def sortable_js_headers(
    
)->tuple: # Tuple of Script elements for app headers

```

*CDN script tag for Sortable.js, suitable for FastHTML app headers.*

------------------------------------------------------------------------

<a
href="https://github.com/cj-mills/cjm-fasthtml-sortable-queue/blob/main/cjm_fasthtml_sortable_queue/sortable_js.py#L20"
target="_blank" style="float:right; font-size:smaller">source</a>

### generate_sortable_init_script

``` python

def generate_sortable_init_script(
    handle_class:str='drag-handle', # CSS class for drag handle elements
    animation_ms:int=150, # Drag animation duration in milliseconds
)->Script: # Script element with Sortable.js initialization

```

*Generate htmx.onLoad script that initializes Sortable.js on `.sortable`
elements.*

Includes the disable-on-drag/re-enable-on-swap pattern to prevent
double-firing during HTMX response processing.

## Tests

``` python
from fasthtml.common import to_xml

# CDN header
hdrs = sortable_js_headers()
assert len(hdrs) == 1
assert SORTABLE_JS_CDN in to_xml(hdrs[0])

# Init script — default params
script = generate_sortable_init_script()
xml = to_xml(script)
assert ".drag-handle" in xml
assert "animation: 150" in xml
assert "htmx.onLoad" in xml
assert 'this.option("disabled", true)' in xml
assert 'sortableInstance.option("disabled", false)' in xml

# Init script — custom params
script2 = generate_sortable_init_script(handle_class="my-handle", animation_ms=200)
xml2 = to_xml(script2)
assert ".my-handle" in xml2
assert "animation: 200" in xml2

print("All sortable_js tests passed")
```

    All sortable_js tests passed