I am trying to generate an unordered list (HTML) using Eric Shulman's TodoList template. I then want to make this sortable with the jQueryUI, so that I can manually reorder items via drag and drop.
I'm having trouble creating the html from MatchTags... and of course jQuery doesn't want to fire either. Here's the link to the jQuery widget: http://jqueryui.com/sortable/ This code is inside a Todolist tiddler: <html> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <ul id="sortable"> </html> <<matchTags {{"<html><li></html><<tiddler CheckboxToggleTag with: Done [[To Do]] %0\>\> %0<html></li></html>"}} "" sort:title To Do OR Done>> <html></ul></html> <script> jQuery(function() { jQuery( "#sortable" ).sortable(); jQuery( "#sortable" ).disableSelection(); }); </script> This code is in MarkupPostHead: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"; /> <link rel="stylesheet" href="/resources/demos/style.css" /> And the jQueryUI-1.10.1 library is in its own tiddler, tagged with systemConfig. Oh by-the-way (for anyone who could use this) I was able to get the Sortable widget to work in a separate tiddler, on a static unordered list. Here's the code: <html> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> </html> <script> jQuery(function() { jQuery( "#sortable" ).sortable(); jQuery( "#sortable" ).disableSelection(); }); </script> I appreciate any input—thanks! -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at http://groups.google.com/group/tiddlywiki?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
