Mark an element as sortable.<\/p>\n
Sortables are part of a sorter. Sortables in a sorter can be reordered by drag & drop.<\/p>\n
Example:<\/p>\n
{% sorter id="sorter" tag="mysorter" %}\n{% sortable id="sort1" tag=1 %}\n{% sortable id="sort2" tag=2 %}\n<ul id="sorter">\n <li id="sort1">Sortable 1<\/li>\n <li id="sort2">Sortable 2<\/li>\n<\/ul>\n<\/code><\/pre>\nThis creates a list where the order of the list items can be changed by dragging and dropping them.<\/p>\n
When the order of the sortables is changed, an event is sent to the sorter’s page\ncontroller<\/a> or delegate<\/a>. The event contains the\nordered list of sortable tags.<\/p>\nThe event handler function is called like:<\/p>\n
event({sort, Sortables, Sorter}, Context).\n<\/code><\/pre>\nWhere “Sortables” is the list of sortables and “Sorter” is the sorter. Both are “#dragdrop” records:<\/p>\n
-record(dragdrop, {tag, delegate, id}).\n<\/code><\/pre>\nWhere “tag” is the tag of the sortable or sorter, “delegate” is the module that handles the event and “id”\nis the HTML id of the sortable or sorter.<\/p>\n
Note<\/p>
if the tag is a string then the #dragdrop<\/code> tag will be an atom.<\/p><\/div>\nThe sortable can have the following arguments:<\/p>\n
Argument<\/th> Description<\/th> Example<\/th><\/tr><\/thead> id<\/code><\/td>The HTML id of the sortable element.<\/td> id=”mysortable1”<\/code><\/td><\/tr>tag<\/code><\/td>Tag that identifies the sortable to the event handler. Can be any value. A string will be converted to an atom.<\/td> tag="my_atom_value"<\/code><\/td><\/tr>delegate<\/code><\/td>The delegate of the sortable, currently unused will be passed in the sortables’s #dragdrop record.<\/td> delegate=”mymodule”<\/code><\/td><\/tr>class<\/code><\/td>A CSS class that will be added to the sortable. The class “sortable” will always be added.<\/td> class=”dragitem”<\/code><\/td><\/tr><\/tbody><\/table>","slug":"sortable","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"e499865149bc2f5d09b6cd46655bc55eedf0edab43553f4c669806c01e2cbc08","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":327,"is_a":["meta","category"],"name":"template_scomp","title":"Scomp","uri":"https:\/\/zotonic.com\/id\/template_scomp"},"doc_source_path":"apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_sortable.erl","publication_start":"2023-06-24T08:18:00Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_sortable.erl","pivot_location_lng":null,"doc_source_kind":"scomp","name":"doc_template_scomp_scomp_sortable","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2020-05-30T05:47:20Z","uri":null,"doc_status":"current","is_dependent":false,"erlang_app":"zotonic_mod_wires","publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"a9af6256d16f0717b59ea8dcf2a2e0565573bdd4\n","erlang_module":"scomp_wires_sortable","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-10-14T14:01:04Z","title_slug":"sortable"},"uri":"https:\/\/zotonic.com\/id\/1398","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1398"}},"status":"ok"}