in reply to Re: How to let a user sort a list on a web page
in thread How to allow a user to reorder rows from a database using a web form?
There is an excellent add-on to jQuery called jQuery UI. It has an example page that does exactly what I want. It's called Sortable and you can play with a demo here: http://jqueryui.com/demos/sortable/ Drag and drop the items to change their order.
The small amount of javascript code to do all this with the jquery ui library is listed below. The question now is, how can I do this from my perl script? There doesn't seem to yet be a jQuery-UI module in cpan. Can anyone demonstrate a way to get the demo below running from a perl script?
Examples, links, pointers would be much appreciated. Thanks!
<style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 6 +0%; } #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> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> <div class="demo"> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthi +ck-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthi +ck-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthi +ck-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthi +ck-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthi +ck-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthi +ck-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthi +ck-2-n-s"></span>Item 7</li> </ul> </div><!-- End demo --> <div style="display: none;" class="demo-description"> <p> Enable a group of DOM elements to be sortable. Click on and drag a +n element to a new spot within the list, and the other items will ad +just to fit. By default, sortable items share <code>draggable</code> prope +rties. </p> </div><!-- End demo-description -->
|
|---|
| Replies are listed 'Best First'. | |
|---|---|
|
Re^3: How to let a user sort a list on a web page
by marto (Cardinal) on Jan 04, 2011 at 11:30 UTC | |
by yaconsult (Acolyte) on Jan 04, 2011 at 16:58 UTC | |
by marto (Cardinal) on Jan 04, 2011 at 22:20 UTC | |
by yaconsult (Acolyte) on Jan 05, 2011 at 02:26 UTC | |
by Anonymous Monk on Jan 05, 2011 at 03:41 UTC | |
by marto (Cardinal) on Jan 05, 2011 at 09:00 UTC | |
|