Love this module and use it for every single install. The addition of
sortablelists is excellent. Really improves the editor interface.

It would be great if out of the box it supported multiple sortable lists on the
one page. Here's a template I created to do that, if it helps.

{* multipleSortableLists template *}

{*
This template provides one example of using javascript in a CMS module
template.  The javascript is left here as an example of how one can interact
with smarty in javascript.  You may infact want to put most of these functions
into a seperate .js file and include it somewhere in your head section.

You are free to modify this javascript and this template.  However, the php
driver scripts look for a field named in the smarty variable
{$selectarea_prefix}, and expect that to be a comma seperated list of values.

 Modified by CT 25Aug14 - to handle multiple fields on one page
*}

{literal}
<script type='text/javascript'>


function selectarea_update_value(sortablelist)
{
  var sel_elem = jQuery(sortablelist).find('.selectlist');
  var valuefld = jQuery(sortablelist).attr('data-valueFld');
  var opts = jQuery(sel_elem).find('option');
  var tmp = new Array();
  for( i = 0; i < opts.length; i++ )
    {
      tmp[tmp.length] = opts[i].value;
    }
  var str = tmp.join(',');
  jQuery('#'+valuefld).val(str);
}


function selectarea_handle_down(button)
{
  var sortablelist = jQuery(button).closest('.sortablelist');
  var sel_elem = jQuery(sortablelist).find('.selectlist');
  var sel_idx = sel_elem[0].selectedIndex;
  var opts = jQuery(sel_elem).find('option');
  for( var i = opts.length - 2; i >= 0; i-- )
    {
      var opt = opts[i];
      if( opt.selected )
        {
           var nextopt = opts[i+1];
           opt = sel_elem[0].removeChild(opt);
           nextopt = sel_elem[0].replaceChild(opt,nextopt);
           sel_elem[0].insertBefore(nextopt,opt);
        }
    }
  selectarea_update_value(sortablelist);
}


function selectarea_handle_up(button)
{
  var sortablelist = jQuery(button).closest('.sortablelist');
  var sel_elem = jQuery(sortablelist).find('.selectlist');
  var sel_idx = sel_elem[0].selectedIndex;
  var opts = jQuery(sel_elem).find('option');
  if( sel_idx > 0 )
    {
      for( var i = 1; i < opts.length; i++ )
        {
          var opt = opts[i];
          if( opt.selected )
            {
              sel_elem[0].removeChild(opt);
              sel_elem[0].insertBefore(opt, opts[i-1]);
            }
        }
    }
  selectarea_update_value(sortablelist);
}


function selectarea_handle_remove(button)
{
  var sortablelist = jQuery(button).closest('.sortablelist');
  var sel_elem = jQuery(sortablelist).find('.selectlist');
  var sel_idx = sel_elem[0].selectedIndex;
  if( sel_idx >= 0 )
    {
      sel_elem[0].remove(sel_idx);
    }
  selectarea_update_value(sortablelist);
}


function selectarea_handle_add(button)
{
  var sortablelist = jQuery(button).closest('.sortablelist');
  var allowduplicates = jQuery(sortablelist).attr('data-allowDuplicates');
  var max_selected = jQuery(sortablelist).attr('data-maxSelected');
  var mas_elem = jQuery(sortablelist).find('.masterlist');
  var mas_idx = mas_elem[0].selectedIndex;
  var sel_elem = jQuery(sortablelist).find('.selectlist');
  var opts = jQuery(sel_elem).find('option');

  if( max_selected > 0 && opts.length >= max_selected ) return;
  if( mas_idx >= 0 )
    {
      var newValue = mas_elem[0].options[mas_idx].value;
      if( allowduplicates == 0 )
        {
          for( var i = 0; i < opts.length; i++ )
          {
            if( opts[i].value == newValue ) return;
          }
        }
      jQuery(mas_elem[0].options[mas_idx]).clone().appendTo(sel_elem);
    }
  selectarea_update_value(sortablelist);
}


function selectarea_handle_select()
{
  var sel_elem = document.getElementById(selectlist);
  var sel_idx = sel_elem.selectedIndex;
  var mas_elem = document.getElementById(masterlist);
  var mas_idx = mas_elem.selectedIndex;
  addbtn.disabled = (mas_idx >= 0);
  rembtn.disabled = (sel_idx >= 0);
  addbtn.disabled = (sel_idx >= 0);
  downbtn.disabled = (sel_idx >= 0);
}

</script>
{/literal}


<table class="sortablelist" data-valueFld="{$selectarea_prefix}"
data-allowDuplicates="{$allowduplicates}" data-maxSelected="{$max_selected}" >
   <tr>
     <td>
      {* left column - for the selected items *}
      {$label_left}<br/>
<select id="{$selectarea_prefix}_selectlist" class="selectlist" size="10"
onchange="selectarea_handle_select();" style="min-width:150px;">
        {html_options options=$selectarea_selected}
      </select><br/>
     </td>
     <td>
      {* center column - for the add/delete buttons *}
<input type="submit" id="{$selectarea_prefix}_add" class="add" value="<<"
onclick="selectarea_handle_add(this); return false;"/><br/>
<input type="submit" id="{$selectarea_prefix}_remove" class="remove"
value=">>" onclick="selectarea_handle_remove(this); return false;"/><br/>
<input type="submit" id="{$selectarea_prefix}_up" class="up"
value="{$upstr}" onclick="selectarea_handle_up(this); return false;"/><br/>
<input type="submit" id="{$selectarea_prefix}_down" class="down"
value="{$downstr}" onclick="selectarea_handle_down(this); return false;"/><br/>
     </td>
     <td>
      {* right column - for the master list *}
      {$label_right}<br/>
<select id="{$selectarea_prefix}_masterlist" class="masterlist" size="10"
onchange="selectarea_handle_select();" style="min-width:150px;">
        {html_options options=$selectarea_masterlist}
      </select>
     </td>
   </tr>
 </table>
<div><input type="hidden" id="{$selectarea_prefix}" name="{$selectarea_prefix}"
value="{$selectarea_selected_str}" /></div>