Thank you for the pointers.

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 -->

[download]

In reply to Re^2: How to let a user sort a list on a web page by yaconsult
in thread How to allow a user to reorder rows from a database using a web form? by yaconsult

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.