 <style>
#themen { list-style-type: none; margin: 0; padding: 0; margin-bottom: 15px;zoom: 1; }
#themen li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 95%; }
</style>
<%= render :partial=>'layouts/pretty_toolbar' %>

<div class="container-fluid">
<div class="row-fluid">
<div class="span4">

<ul id="themen" class="sort" >
  <%= render partial:"themen/verw_liste", object: @themen %>
</ul>

</div>
<div class="span8">
<div id="themaview"></div>
</div>
<script>

$( document ).ready(function(){
  $("#themen").sortable({
    cursor: 'crosshair',
    drag:true,
    handle: '.handle',
    update: function(){
      $.ajax({
        url: '<%= themengruppe_sort_themen_path(@themengruppe) %>',
        type: 'post',
        data: $('#themen').sortable('serialize'),
        handle: ".contentbox",
        dataType: 'script',
        complete: function(request){
                   }
      })
    }
  });
 
});
</script>

<!-- 
$( document ).ready(function(){
  $("#themen").sortable({
    axis: 'y',
    drag:true,
    dropOnEmpty: false,
    handle: '.handle',
    cursor: 'crosshair',
    items: 'li',
    opacity: 0.4,
    scroll: true,
    update: function(){
      $.ajax({
        url: '/books/sort',
        type: 'post',
        data: $('#themen').sortable('serialize'),
        dataType: 'script',
        complete: function(request){
          $('#themen').effect('highlight');
        }
      });
    }
  });
});
-->
