Databases
StackOverflow2013
Postsdbo
POjQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Interests'
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Interests'
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJoshua F. Rountree
    1. USJoshua F. Rountree
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Interests'
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Interests'
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Interests'
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSo what exactly is your question? First you want somebody to take a look at the "tolerance" function, then something about insertAter and over-binding elements on top of that. Be more specific so someone care enough to actually take a closer look at your problem.
      singulars
      1. POjQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Interests'
      1. USWTK
    2. COI'm with WTK. And also, I don't understand how such a vague question can have 22 positive votes :-O
      singulars
      1. POjQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Interests'
      1. USFrancisco
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload