user has_many groups

_form.html.haml

- form_for @user do |f|
  .small= f.error_messages
  
  %fieldset
    %legend= t(:please_fill_the_following_fields)
    
    .box
      = f.label :name, User.human_attribute_name(:name)
      = f.text_field :name, :style => 'width: 500px'

    .box
      = f.label :groups, Post.human_attribute_name(:groups), :class => 'clear clearfix'
      = hidden_field_tag "user[group_ids][]"
    
      .span-6.center{:style => 'float:left'}= t(:available_groups)
      .span-6.center.last{:style => 'float:right'}= t(:assigned_groups)
    
      %ul#sortable1.sortable.span-5{:style => 'float:left'}
        - (Group.all - @user.groups).each do |g|
          %li{:rel => g.id}=h g.name
  
      %ul#sortable2.sortable.span-5.last{:style => 'float:right'}
        - @user.groups.each do |g|
          %li{:rel => g.id}=h g.name
  
    .box.clear.clearfix
      = f.submit t(:submit)

= link_to t(:back_to_resources, :resources => t(:users).capitalize), users_path

- content_for(:footer) do
  :javascript
    $(function() {
      $('#sortable1, #sortable2').sortable({
        connectWith: '.sortable',
        cursor: 'crosshair'
      });
      
      $('form').bind('submit', function() {
        var form = $(this);
        
        $('#sortable2 li').each(function(e) {
          var li = $(this);
          form.append('<input type="hidden" name="user[group_ids][]" value="' + li.attr('rel') + '"></input>');
        });
        
        return true;
      })
    });

style.sass

.sortable
    list-style-type: none
    border: 1px solid black
    +box
    
    li
      border: 1px solid black
      background: none repeat scroll 0 0 #FFE45C
      font-size: 0.8em
      padding: 5px
      text-align: center
    li + li
      margin-top: 10px