title: jQuery draggable - multiple snap (to) objects with different snapMode for each object
body: <p>Situation as follows - one draggable div, can snap to multiple other divs. What I need to achieve - specify different snap modes for different divs. For example - snap:'#firstDiv', snapMode:'inner' and for that same draggable div another snap:'#secondDiv', snapMode:'outer'</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div id="first" class="tile"&gt;&lt;p&gt;first&lt;/p&gt;&lt;/div&gt;
      &lt;div id="second" class="tile"&gt;&lt;p&gt;second&lt;/p&gt;&lt;/div&gt;
      &lt;div id="third"&gt;&lt;p&gt;3&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrapper { 
      width:100%; 
      height:400px; 
      position:relative; 
  }
  #first, #second, #third { 
      position:absolute; 
      width:100px; 
      height:100px; 
      border:1px solid #000; 
      text-align:center;
  }
  #first { top:10px; left:10px; }
  #second { right:100px; bottom:100px; }
  
  #third {
      width:50px;
      height:50px;
      left:50px;
      top:150px;
  }
  p { margin:10px; padding:0px; font-weight:bold; }
  </code></pre>
  
  <p><strong>JS, with basic snap to something:</strong></p>
  
  <pre><code>$(document).ready(function(){
      $( "#third").draggable({
          containment: '.wrapper',
          cursor: 'move',
          snap: '.tile',
          snapMode: 'outer'
      });     
  });
  </code></pre>
  
  <p>Here is jsFiddle with above code: <a href="http://jsfiddle.net/563UZ/1/" rel="nofollow">http://jsfiddle.net/563UZ/1/</a></p>