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]

I didn't appreciate that this was the kind of sorting you were looking for, however I'm glad you've found this useful. You'll notice this example code from the jQuery page works as is, you don't need any Perl module to make it work. Using CGI (or CGI::Application or your framework of choice) you can output dynamic content. You simply include this example jQuery code in the output you send to the browser.

I'd suggest using a templating system such as HTML::Template or Template::Toolkit to separate your Perl code from the HTML/CSS/JavaScript code. If you look at the HTML::Template documentation you'll notice the <TMPL_LOOP> tag which you could use to populate your sortable data (in the example above each row is a HTML <li>, list item).

I'd also suggest that you benchmark performance of this method with your dataset and compare it to the performance of the datatable plugins I mentioned previously.

Well I wasn't sure what would be the best way for management types to be able to sort the items. When I found this demo, it seemed like the perfect solution.

I have been using perl for years for things like data munging, converting, etc. What I'm not sure of is how to connect the non-perl stuff to perl.

I have a perl script that runs, pulls in data in the most useful format it can access, munges it and creates an sqlite database out of it. Now, I'm working on the other half where a manager will use a webpage to access data specific to him, based on his login, and allow him to rearrange the order of the items.

So, let's assume he's logged in, now he gets taken to a page like the one in the demo. Based on his login, the CGI has extracted relevant items from the database. In the first version, I generated an html table from the results of my database query. Instead, I would like to generate the javascript screen shown in the demo. After he rearranges the items, I want him to be able to hit a save button or something. At that point, I assume I will need to traverse the dom stuff in order to extract the ordering that he has just imposed on the list.

But I don't yet see how the pieces fit together. What does the CGI script that invokes the Sortable function look like? How and when does my CGI script get control back after the javascript code has finished running so I can extract the changes that were made?

As a start, could you show me how to get the Sortable demo working from CGI. Does the sortable stuff go into its own .js file or is it embeded in the perl script? How is control passed back and forth?

I would like to see a simple conversion of the sortable demo so that it is started by or contained within a CGI script, the user rearranges the items on the screen, pushes a button, and them the CGI gets control back and prints the new order. This would help me to understand how they call and return from each other.

This is very powerful to be able to interact with external libraries that are very good at doing specific tasks. Any books, articles, etc. about using perl with other toolkits, languages, etc. would be gratefully accepted.

Thanks for you help and encouragement - it really helps! I'll send some time with the template toolkit but, again, I'm not sure how to tie all the pieces together between javascript and perl. Are there some examples I could study where CGI scripts invoke javascript toolkits and then get control back for further processing? Simple stuff just to illustrate would be fine. If templates were used too, that would be even better. Leo