title: Draggable/Droppable for Battleship game
body: <p>I've been experimenting with the jQuery UI draggable/droppable interaction to allow a user to set ships for a game of Battleship. As far as I can tell, droppable interactions work just fine when the drop location is appropriately sized to fit a draggable item, but in the Battleship game, you have ships of several different lengths that fit into a number of squares ranging 2-5. </p>
  
  <p>If you check out this jsFiddle (<a href="http://jsfiddle.net/cDqGN/" rel="nofollow">http://jsfiddle.net/cDqGN/</a>), and mess around with the ship of length two (versus the single block), you'll see it's fairly easy to screw up the drop, with the ship getting stuck between squares, or getting dragged a square to the right of where you intended to drop it. </p>
  
  <p>Does anyone know of any tricks with this interaction to get it to go better?</p>
  
  <p>In particular, this is the interaction as I have it now:</p>
  
  <pre><code>function handleDrop( event, ui ) {
      ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
      ui.draggable.draggable( 'option', 'revert', false );
  }
  </code></pre>