title: jQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Interests'
body: <p>I'm reverse engineering facebook's uiTokenizer using <code>$.special.event.drag</code> and <code>$.special.event.drop</code> and jQuery because jQuery UI's sortable / draggable is heavy and slow.</p>
  
  <p>My question I think is related to the tolerance math for deciding when to inject the placeholder element.</p>
  
  <p>I've cleaned up a lot of this code since I first wrote it but the premise is still there and should work for this question.</p>
  
  <p>Here is the code and logic: 
  <strong><a href="http://jsfiddle.net/JoshuaIRL/kf9Qt/" rel="nofollow">http://jsfiddle.net/JoshuaIRL/kf9Qt/</a></strong> for testing.</p>
  
  <p>The area I need somebody to look at would be the "tolerance" area of the $.drop function if you do  find for it.</p>
  
  <pre><code> $.drop({
        mode:'intersect',
         tolerance: function( event, proxy, target ){
             var testV = event.pageY &gt; ( target.top + target.height / 2 );
  
             $.data(target.elem, "drop+reorder", testV ? "insertAfter" : "insertBefore" );    
             return this.contains( target, [ event.pageX, event.pageY ] );
         }
   });
  </code></pre>
  
  <p>Facebook's seems to do an "insertAfter" when your actual cursor hits another element.</p>
  
  <p>I'm thinking this might be the heart of it as well:</p>
  
  <pre><code>if ( drop &amp;&amp; $(drop).is('.uiToken') &amp;&amp; ( drop != dd.current || method != dd.method ) ){    
        $( this )[ method ]( drop );
        dd.current = drop;
        dd.method = method;
        dd.update();
       refreshTokens(clickOffset);
       placeholder.insertAfter($(this));
  }
  </code></pre>
  
  <p>Also, I need to figure out how to ensure I'm not over-binding my elements with this stupid open-ended <code>$.drop()</code> method ... :-\</p>
  
  <p>Any help you may offer will be greatly appreciated.</p>
  
  <p><strong>UPDATE:</strong>
  To answer your comments...
  If you go to the JSFiddle link and you drag an element over another element...
  It should immediately bump it out of the way in all directions.
  To see a comparison from mine versus Facebook's, checkout theirs at <a href="https://www.facebook.com/" rel="nofollow">https://www.facebook.com/</a>/favorites then click on "Edit" button.</p>
  
  <p>Whether or not the "Tolerance" method is what's wrong, their interests list is what I'm looking to duplicate.  I don't even know if the Tolerance area is what's wrong, I want to achieve what they are doing.</p>
  
  <p>I hope this helps!</p>