jquery - support - Internet Explorer: el estado de desplazamiento se vuelve pegajoso cuando el elemento DOM objetivo se mueve en el DOM

jquery.browser is deprecated

Question

Estoy construyendo una aplicación que le permite mover elementos de la lista de una lista a otra simplemente haciendo clic en ellos. Sin embargo, para que el usuario sepa cuál es la acción prevista para un clik, configuro un: estado de desplazamiento en el CSS que muestra una instrucción como "<< mover"

Sin embargo, el problema que he encontrado es que en Internet Explorer (versiones probadas 7-9), cuando muevo un elemento DOM, el estado: hover de ese elemento permanece (se vuelve pegajoso), incluso cuando se mueve el mouse. El: estado de desplazamiento solo desaparece cuando un usuario se desplaza sobre el elemento en su nueva ubicación y luego aleja el mouse. Este es un problema solo de Internet Explorer, parece.

Puede ver el problema si usa IE yendo a http://jsfiddle.net/hc2Eu/32/

Por supuesto, hay una solución alternativa que es no usar CSS: pasar el estado y usar un evento de jQuery hover, pero esta no es la mejor manera de hacer las cosas y mantener los elementos: el estado de desplazamiento controlado en CSS es de lejos el forma más robusta de hacer esto. La solución alternativa se puede ver en http://jsfiddle.net/hc2Eu/29/

¿Alguien ha descubierto cómo puedo decirle a Internet Explorer de alguna manera que un elemento ya no está debajo del mouse, y debería lanzar el: estado de vuelo estacionario?

Mate

Answer 1

Intente clonar el elemento en lugar de anexarlo directamente. Cuando anexas, tomas el elemento de su posición actual y lo declaras en el DOM y lo colocas en su nueva posición, básicamente moviéndolo. Es evidente que IE no vuelve a pintar el elemento cuando esto sucede, ni restablece su estado hasta que pasa el mouseover.

Al clonarlo, obligas a IE a crear un nuevo elemento que, como no está en la página, no puede tener aplicado el estado de desplazamiento de todos modos. Luego solo agréguela en su nuevo contenedor, elimine el original y listo.

Vea un ejemplo en este violín: dos líneas de código, navegador cruzado, y usted permanecerá conciso y no contaminará su código. :)

http://jsfiddle.net/hc2Eu/36/

Answer 2

esto manejará tu problema. clonar el elemento cliqueado (agregar verdadero si desea guardar el evento de clic y otros manejadores) insertarlo después de sí mismo para que tenga el mismo lugar en el dom. luego quítalo. el clon no se quedará bloqueado con el estado de vuelo estacionario. Todas las referencias son relativas (esto) por lo que funcionará en cualquier lugar sin cambiar los selectores.

        $("#elementwithhover").click(function() { 
            // code that makes element or parent slide or 
            // otherwise move out from under mouse. 
            $(this).clone(true).insertAfter($(this));
            $(this).remove();
        });