Topic: Ajax: drag and drop problem

Hi,

I am attempting to implement drag and drop selections via Ajax - this is across 2 lists (both defined by CSS).

The basic premis is that the drag/drop functionality will update a single field (game_id) within the Scenario model.

My problem is that I cannot get the drag/drop parts to function correctly, the problems appear to be: (1) after I drag an element from one box to another it "sticks" to the mouse and (2) After I double click to "release" the element I cannot select any other element, ie the ajax functionality appears to not work anymore.

I do not receive any kind of error, but I cannot use Ajax functionality and yet the rest of the form is still usable.

My code is as follows:

Application.rhtml

      <%= javascript_include_tag :defaults %>
      <%= stylesheet_link_tag 'rosta' %>
      </head>

Controller
 def associate #this is the originating method that generates the views/partials
      @available = Scenario.find(:all, :conditions =>['game_id=?', 0])
      @game = Game.find(:first, :conditions=> [params[:id]])
      @selected = Scenario.find(:all, :conditions =>['game_id >?', 0])      
  end
 
  def scenario_available
      logger.info "Controller:scenario - method:scenario available"
      update_game_scenario_association(params[:id])
  end
  def scenario_completed
      update_game_scenario_association(params[:id])
  end
 
  def update_game_scenario_association (scenario)
      @myscenario = scenario
      @scenario = Scenario.find(:first, :conditions =>['id=?',@myscenario])
      @scenario.game_id = @game.id
      @scenario.save!
      @available = Scenario.find(:all, :conditions =>['game_id=?', 0])
      @selected = Scenario.find(:all, :conditions =>['game_id >?', 0])
      render :update do |page|
          page.replace_html 'available_scenarios', :partial => 'available'
        page.replace_html 'selected_scenarios', :partial => 'selected'
      end
      
  end

The view
#Associate.rhtml
Scenario Association for game <%= @game.name %>
    <div id="available_scenarios">
        Available Scenarios
        <%= render :partial =>"available_scenarios" %>
        </div>

    <div id ="selected_scenarios">
            Selected Scenarios           
            <%= render :partial =>"selected_scenarios" %>
    </div>
        <%= drop_receiving_element('available_scenarios' ,
            :accept        => 'selected_scenario',
            :hoverclass    => 'hover',
            :with        => "'scenario=' + encodeURIcomponent(element.id.split('_').last())",
            :url        => {:controller => 'blah-scenario', :action => 'blah-scenario_available', :id => 0})
    %>
            <%= drop_receiving_element('selected_scenarios' ,
            :accept        => 'available_scenario',
            :hoverclass    => 'hover',
            :with        => "'scenario=' + encodeURIcomponent(element.id.split('_').last())",
            :url        => {:controller => 'blog-scenario', :action => 'blog-scenario_completed', :id =>@game.id})
        %>


The partials

#_available_scenarios.rhtml
<ul>
<% @available.each do |ava| %>
<% domid = "scenario_#{ava.id}" %>
    <li class="available_scenario" id='<%= domid %>'><%=ava.name %>
    <%=domid %> # here for debugging purposes only
    <%= draggable_element(domid, :ghosting =>true, :revert => true) %>
    </li>
<% end %>
</ul>

#_selected_scenarios.rhtml
<ul>
    <% @selected.each do |sel| %>
    <% domid = "scenario_#{sel.id}" %>
    <li class="selected_scenario" id='<%= domid %>'><%=sel.name %>
    <%=domid %> # here for debugging purposes only
    <%= draggable_element(domid, :ghosting =>true, :revert => true) %>
    </li>
    <% end %>
</ul>

Below is a snapshot from my development log...

Processing ScenarioController#associate (for 127.0.0.1 at 2007-03-05 15:57:15) [GET]
  Session ID: f6d5240b735b620658814da15d1511c9
  Parameters: {"action"=>"associate", "id"=>"1", "controller"=>"scenario"}
  User Columns (0.000000)   SHOW FIELDS FROM users
  User Load (0.015000)   SELECT * FROM users WHERE (users.`id` = 1) LIMIT 1
  Join Table Columns (0.000000)   SHOW FIELDS FROM roles_users
  Role Load (0.000000)   SELECT * FROM roles INNER JOIN roles_users ON roles.id = roles_users.role_id WHERE (roles_users.user_id = 1 ) 
  Role Columns (0.016000)   SHOW FIELDS FROM roles
  Scenario Load (0.000000)   SELECT * FROM scenarios WHERE (game_id=0) 
  Game Load (0.000000)   SELECT * FROM games WHERE (1) LIMIT 1
  Scenario Load (0.000000)   SELECT * FROM scenarios WHERE (game_id >0) 
Rendering  within layouts/application
Rendering scenario/associate
  Game Columns (0.000000)   SHOW FIELDS FROM games
  Scenario Columns (0.000000)   SHOW FIELDS FROM scenarios
Rendered scenario/_available_scenarios (0.01600)
Rendered scenario/_selected_scenarios (0.00000)
Rendered sidebars/_all_general (0.01600)
Rendered sidebars/_admin_general (0.00000)
Rendered sidebars/_scenario_general (0.00000)
Completed in 0.29700 (3 reqs/sec) | Rendering: 0.03200 (10%) | DB: 0.03100 (10%) | 200 OK [http://localhost/scenario/associate/1]