package SortableList;

use strict;
use warnings;

use base qw(CGI::Application);
use CGI::Application::Plugin::TT;
use CGI::Application::Plugin::HTMLPrototype;

sub setup {
    my $self = shift;
    $self->run_modes([qw(
        start
    )]);
}

sub start {
    my $self = shift;

    return $self->tt_process(\*DATA);
}

1;
__DATA__
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>CGI::Application::Plugin::HTMLPrototype - SortableList Example</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  [% c.prototype.define_javascript_functions %]
  <style>
    .listitem {
        cursor: move;
    }
  </style>
</head>
<body>

<h3>CGI::Application::Plugin::HTMLPrototype - SortableList Example</h3>

<p>Code:  <a href="sortablelist.cgi?rm=view_source">SortableList source</a>

<h4>Sortable lists</h4>

<ul class="sortablelist" id="sortablelist_1">
    <li class="listitem" id="list1_1">Item 1.1</li>
    <li class="listitem" id="list1_2">Item 1.2</li>
    <li class="listitem" id="list1_3">Item 1.3</li>
    <li class="listitem" id="list1_4">Item 1.4</li>
</ul>
<hr>
<ul class="sortablelist" id="sortablelist_2">
    <li class="listitem" id="list1_1">Item 2.1</li>
    <li class="listitem" id="list1_2">Item 2.2</li>
    <li class="listitem" id="list1_3">Item 2.3</li>
    <li class="listitem" id="list1_4">Item 2.4</li>
</ul>

[% c.prototype.sortable_element( 'sortablelist_1' { containment='["sortablelist_1","sortablelist_2"]' } ) %]
[% c.prototype.sortable_element( 'sortablelist_2' { containment='["sortablelist_1","sortablelist_2"]' } ) %]

</body>
</html>
