javascript - jQuery's drag and drop - reverse engineering Facebook's uiTokenizer on 'Arts & Inte

admin管理员组

文章数量:1389643

I'm reverse engineering facebook's uiTokenizer using $.special.event.drag and $.special.event.drop and jQuery because jQuery UI's sortable / draggable is heavy and slow.

My question I think is related to the tolerance math for deciding when to inject the placeholder element.

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.

Here is the code and logic: / for testing.

The area I need somebody to look at would be the "tolerance" area of the $.drop function if you do find for it.

 $.drop({
      mode:'intersect',
       tolerance: function( event, proxy, target ){
           var testV = event.pageY > ( target.top + target.height / 2 );

           $.data(target.elem, "drop+reorder", testV ? "insertAfter" : "insertBefore" );    
           return this.contains( target, [ event.pageX, event.pageY ] );
       }
 });

Facebook's seems to do an "insertAfter" when your actual cursor hits another element.

I'm thinking this might be the heart of it as well:

if ( drop && $(drop).is('.uiToken') && ( drop != dd.current || method != dd.method ) ){    
      $( this )[ method ]( drop );
      dd.current = drop;
      dd.method = method;
      dd.update();
     refreshTokens(clickOffset);
     placeholder.insertAfter($(this));
}

Also, I need to figure out how to ensure I'm not over-binding my elements with this stupid open-ended $.drop() method ... :-\

Any help you may offer will be greatly appreciated.

UPDATE: To answer your ments... 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 parison from mine versus Facebook's, checkout theirs at //favorites then click on "Edit" button.

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.

I hope this helps!

I'm reverse engineering facebook's uiTokenizer using $.special.event.drag and $.special.event.drop and jQuery because jQuery UI's sortable / draggable is heavy and slow.

My question I think is related to the tolerance math for deciding when to inject the placeholder element.

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.

Here is the code and logic: http://jsfiddle/JoshuaIRL/kf9Qt/ for testing.

The area I need somebody to look at would be the "tolerance" area of the $.drop function if you do find for it.

 $.drop({
      mode:'intersect',
       tolerance: function( event, proxy, target ){
           var testV = event.pageY > ( target.top + target.height / 2 );

           $.data(target.elem, "drop+reorder", testV ? "insertAfter" : "insertBefore" );    
           return this.contains( target, [ event.pageX, event.pageY ] );
       }
 });

Facebook's seems to do an "insertAfter" when your actual cursor hits another element.

I'm thinking this might be the heart of it as well:

if ( drop && $(drop).is('.uiToken') && ( drop != dd.current || method != dd.method ) ){    
      $( this )[ method ]( drop );
      dd.current = drop;
      dd.method = method;
      dd.update();
     refreshTokens(clickOffset);
     placeholder.insertAfter($(this));
}

Also, I need to figure out how to ensure I'm not over-binding my elements with this stupid open-ended $.drop() method ... :-\

Any help you may offer will be greatly appreciated.

UPDATE: To answer your ments... 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 parison from mine versus Facebook's, checkout theirs at https://www.facebook.//favorites then click on "Edit" button.

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.

I hope this helps!

• javascript
• jquery
• facebook
• drag-and-drop

Share Improve this question Follow edited Mar 28, 2012 at 18:29 Joshua F. Rountree asked Feb 22, 2011 at 14:56 Joshua F. RountreeJoshua F. Rountree 1,48222 gold badges1414 silver badges3030 bronze badges 2

• 19 So 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. – WTK Commented Nov 4, 2011 at 9:07
• 4 I'm with WTK. And also, I don't understand how such a vague question can have 22 positive votes :-O – Francisco Commented Nov 10, 2011 at 13:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

It looks like you are just determining if the draggables right intersects the targets left, and if the draggables top intersects the targets bottom (with some tolerance).

There are 2 ways I would go about this:

1. Find all intersect elements and find the largest area - in this case the left square of the image below.
2. If the draggable has the same dimensions as the droppable the 1/4 overlap would suffice - in this case the right square.

The second is by far the easiest to implement but is no means as general as the first. So by having a quick look through your code, I would loop through all the "possible" droppable elements determine the area of the overlap and target the largest.

本文标签：