Arrastrar y soltar de jQuery: ingeniería inversa uiTokenizer de Facebook en ‘Artes e intereses’

3 minutos de lectura

avatar de usuario
Joshua F. Rountree

Estoy usando ingeniería inversa en el uiTokenizer de Facebook $.special.event.drag y $.special.event.drop y jQuery porque jQuery UI ordenable/arrastrable es pesado y lento.

Creo que mi pregunta está relacionada con las matemáticas de tolerancia para decidir cuándo inyectar el elemento de marcador de posición.

He limpiado mucho de este código desde que lo escribí por primera vez, pero la premisa sigue ahí y debería funcionar para esta pregunta.

Aquí está el código y la lógica:
http://jsfiddle.net/JoshuaIRL/kf9Qt/ para las pruebas.

El área que necesito que alguien mire sería el área de “tolerancia” de la función $.drop si la encuentra.

 $.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 parece hacer una “inserción posterior” cuando el cursor real toca otro elemento.

Estoy pensando que esto podría ser el corazón de esto también:

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

Además, necesito encontrar la manera de asegurarme de no vincular en exceso mis elementos con este estúpido final abierto. $.drop() método … :-\

Cualquier ayuda que pueda ofrecer será muy apreciada.

ACTUALIZAR:
Para responder a sus comentarios… Si va al enlace JSFiddle y arrastra un elemento sobre otro elemento… Debería eliminarlo inmediatamente en todas las direcciones. Para ver una comparación entre el mío y el de Facebook, consulta el de ellos en https://www.facebook.com//favoritos luego haga clic en el botón “Editar”.

Ya sea que el método de “Tolerancia” sea o no lo que está mal, su lista de intereses es lo que estoy buscando duplicar. Ni siquiera sé si el área de Tolerancia es lo que está mal, quiero lograr lo que están haciendo.

¡Espero que esto ayude!

  • Entonces, ¿cuál es exactamente tu pregunta? Primero, desea que alguien eche un vistazo a la función de “tolerancia”, luego algo sobre insertAter y elementos de enlace excesivo además de eso. Sea más específico para que a alguien le importe lo suficiente como para examinar su problema más de cerca.

    – WTK

    4 de noviembre de 2011 a las 9:07

  • Estoy con WTK. Y además, no entiendo como una pregunta tan vaga puede tener 22 votos positivos :-O

    – Francisco

    10 de noviembre de 2011 a las 13:59

avatar de usuario
martín

Parece que solo está determinando si los arrastrables a la derecha se cruzan con los objetivos a la izquierda, y si la parte superior de los arrastrables se cruza con la parte inferior de los objetivos (con cierta tolerancia).

Hay 2 maneras en que haría esto:

  1. Encuentre todos los elementos de intersección y encuentre el área más grande, en este caso, el cuadrado izquierdo de la imagen a continuación.
  2. Si el elemento que se puede arrastrar tiene las mismas dimensiones que el elemento que se puede soltar, la superposición de 1/4 sería suficiente; en este caso, el cuadrado correcto.

ingrese la descripción de la imagen aquí

El segundo es, con mucho, el más fácil de implementar, pero no es tan general como el primero. Entonces, al echar un vistazo rápido a su código, recorrería todos los elementos desplegables “posibles” para determinar el área de superposición y apuntar al más grande.

  • martin, gracias por esto… sin embargo, creo que mi problema es una combinación de tolerancia y algún tipo de evento basado en pasar el mouse sobre otro elemento… ¿tiene sentido? Eche un vistazo al enlace de FB que publiqué si tiene una cuenta de FB.

    – Joshua F. Rountree

    28 de marzo de 2012 a las 18:29


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad