If you have used scriptaculous to do drag and drop interactions which result in a replacement of the DOM element you are dropping into, you may have noticed that you can only do one drag and drop before it breaks in IE. The problem occurs when you replace a DOM element which is defined as a Droppable; IE will fail because it will still have the original element registered as a Droppable but it does not handle the fact that it no longer exists in the DOM. Firefox and safari have no issue with this, so this is another frustrating IE specific issue.

Fortunately, this problem is easily solved with a single line of javascript.

In your controller, you just need to add the line Droppables.remove before you replace the element in your respond block. In rails, it would look something like this:

  respond_to do |format|
      format.js do
        render :update do |page|
          page << "Droppables.remove('#{dom_id(@foo)}')"
          page.replace dom_id(@foo), :partial => 'foo'
        end
      end
    end

Share/Bookmark