jQuery faites glisser et déposez - le reverse engineering Facebook du uiTokenizer sur "les Arts et les Intérêts"

Question

Je suis d'ingénierie inverse facebook du uiTokenizer l'aide d' $.special.event.drag et $.special.event.drop et jQuery parce que jQuery UI sortable / draggable est lourd et lent.

Ma question est je pense lié à la tolérance mathématiques permettant de décider d'injecter de l'espace réservé à l'élément.

J'ai nettoyé un grand nombre de ce code depuis que j'ai commencé à l'écrire, mais le principe est toujours là et devrait fonctionner pour cette question.

Voici le code et logique: http://jsfiddle.net/JoshuaIRL/kf9Qt/ pour les tests.

La région, j'ai besoin de quelqu'un à regarder serait la "tolérance" de l' $.drop, si vous ne trouver pour elle.

 $.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 semble faire un "insertAfter" lorsque votre curseur en frappe un autre élément.

Je pense à ce qui pourrait être le cœur de celui-ci:

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));
}

Aussi, j'ai besoin de comprendre comment s'assurer que je ne suis pas sur de liaison mes éléments avec cette stupide ouvertes, $.drop() méthode ... :-\

Toute aide que vous pouvez offrir sera grandement apprécié.

Mise à JOUR: Pour répondre à vos commentaires... Si vous allez à la JSFiddle lien et vous faites glisser un élément sur un autre élément... Il faut immédiatement bosse sortir de la manière dans toutes les directions. Pour voir une comparaison de la mienne rapport à Facebook, de la caisse leurs https://www.facebook.com//favoris, puis cliquez sur le bouton "Modifier".

Si oui ou non la "Tolérance" de la méthode est ce qui est erroné, leurs intérêts liste est ce que je cherche à dupliquer. Je ne sais même pas si la zone de Tolérance est quel est le problème, je veux réaliser ce qu'ils font.

J'espère que cela aide!

Answer 1

On dirait que vous êtes juste de déterminer si le draggables droit croise les objectifs à gauche, et si le draggables top croise les objectifs de fond (avec une certaine tolérance).

Il y a 2 façons je voudrais aller à ce sujet:

1. Trouver tous se croisent éléments et de trouver le plus grand domaine - dans ce cas, le carré de gauche de l'image ci-dessous.
2. Si le bien a les mêmes dimensions que le drop, le 1/4 de chevauchement suffirait - dans ce cas, le droit place.

La seconde est de loin la plus facile à mettre en œuvre, mais il n'est plus général que le premier. Donc, par le fait d'avoir un rapide coup d'oeil par le biais de votre code, je voudrais faire une boucle par tous les "possibles" droppable éléments de déterminer la zone de chevauchement et de la cible la plus importante.