title: JQuery UI, Combining Sortable with Droppable
body: <p>I am trying to combine JQuery UI <strong>sortable</strong> with <strong>droppable</strong> to create multiple pages for dropping and sorting things. I have setup a blog entry with a stand-along demo here:</p>
  
  <p><a href="http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/" rel="noreferrer">http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/</a></p>
  
  <p>and here is a jsFiddle:</p>
  
  <p><a href="http://jsfiddle.net/VUuyx/" rel="noreferrer">http://jsfiddle.net/VUuyx/</a></p>
  
  <p>Note that you can drag to sort the boxes, even into other columns. You can also click the page buttons to switch pages. My problem lies in combining these two features:</p>
  
  <p>By using <strong>droppable</strong>, I've allowed the user to drag a box to a <em>page</em> button, the page will then switch, and the user can finish dragging it onto the newly revealed page. The problem is that when the page switches, the first column which appears under the dragged box doesn't have it's <strong>over</strong> event fire. You have to drag to another column, and then back to the first column to get the placeholder to appear.</p>
  
  <p>I'm not sure, but I think I need to somehow clear the events, or fire them manually. The problem seems to stem from the fact that the dragged box is over the column when it is made visible.</p>
  
  <p>Can you assist with this esoteric dilemma?</p>
  
  <p>Thanks!</p>
  
  <p><strong>Update:</strong></p>
  
  <p>So I have been considering possible work arounds for this. Michal suggested firing the refresh method, which indeed doesn't solve the problem, but made me think about event issues.</p>
  
  <p>It seems that when you mouse away and then back again, the proper events fire. Perhaps if I can manually fire the mouseout event for the first column, the reset will allow the mouseover event to fire properly.</p>
  
  <p>I tried this:</p>
  
  <pre><code>$(".column:first").trigger('mouseout'); 
  </code></pre>
  
  <p>But I don't think that is the same as <strong>sortable</strong>'s out event. Perhaps I should fire <em>that</em> event?</p>