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

Question

Estoy creando una aplicación que le permite mover elementos 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"

El problema que he encontrado es sin embargo 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.

Se puede ver el problema si está utilizando Internet Explorer, vaya a http://jsfiddle.net/hc2Eu/32/

Hay por supuesto una solución alternativa, que es no utilizar CSS estado: hover y utilizar un evento jQuery vuelo estacionario en su lugar, pero esto no es ciertamente la mejor manera de hacer las cosas y mantener los elementos: el estado de desplazamiento controlado en CSS es, de lejos, la forma más robusta de hacerlo. La solución 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 debe liberar el: estado de desplazamiento?

Matt

Answer 1

Trata clonar el elemento en lugar de añadir 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, fuerza 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 se mantendrá conciso y no contaminará su código. :)

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

Answer 2

esto va a manejar su 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(); 
     });