css - salga - overflow hidden no funciona

Activación de arrastrar y soltar Chrome: pseudoclave de desplazamiento sobre elementos circundantes

Question

Me encuentro con un comportamiento de arrastrar y soltar muy frustrante e inesperado en Chrome.

Problema:

La pseudoclase de flotación se activa y se atasca en los elementos circundantes, particularmente en los que el fantasma del DragElement se superpone.

Pasos para reproducir el problema:

• Ejemplo: http://plnkr.co/edit/PayXodHUtxqUZsM3T2ye luego previsualizar en ventana separada
• Haga clic y arrastre cualquiera de los cuadros de números.
• Suelta cualquiera de las otras cajas con su fantasma superponiendo elementos circundantes.

Esto sucede en Chrome 35, 36 y 38-beta. También noté que esto no está sucediendo en el marco de ejecución de Plunker con el editor, sino que está sucediendo en la vista de ventana completa (vinculada anteriormente). También sucede en mi aplicación node-webkit (donde descubrí este problema).

Lo que he intentado hasta ahora:

• Usar -webkit-user-drag: element; en .box
• Agregar el atributo draggable="true" en cada elemento .box para ver si hay alguna diferencia.
• event.stopPropagation en varios elementos, incluida la window

¿Por qué estaría desencadenando :hover el :hover sobre los elementos circundantes? No tiene absolutamente ningún sentido. ¡Estoy a punto de arrancarme el pelo! : /

Gracias de antemano por cualquier persona que esté dispuesta a ayudarme a resolver esto.

Answer 1

¿Puedes agregar una clase a tu etiqueta html / body mientras arrastras? Si es así, podrías usar potencialmente

.is-dragging * {
  pointer-events: none;
}

donde .is-dragging es la clase en su cuerpo / html y luego anula el elemento que está arrastrando actualmente.

Answer 2

¿Has considerado jQuery UI? Sé que cuanto menos recursos externos mejor, pero jQuery UI detecta cuando estás arrastrando, y luego (como dijo "The Reveler"), puedes agregar una clase al cuerpo y especificar

.bodyIsDragging{
   pointer-events: none
 }

Answer 3

Esto funcionó para mí con (de una manera fea):

CSS:

.is-dragging {
    pointer-events: none;
}

JS: (en el evento "drop")

$(''body'').addClass(''is-dragging'');

if (event.clientY < separatorY)
    dragged.insertBefore(target);
else
    dragged.insertAfter(target);

setTimeout(function()
{
    $(''body'').removeClass(''is-dragging'');
}, 1);