javascript - pasar - Eventos de propagación de eventos, superposición y arrastrar y soltar
eventos javascript mdn (4)
Gracias a Scottux, eso me llevó por el camino correcto.
El único problema fue que también cubrió el resto de la página, por lo que no se pudo hacer clic en ninguno de los elementos o entradas. Tuve que ocultar #dragOverlay de forma predeterminada con " display: none " y mostrarlo en este evento
// Display an overlay when dragging a file over
$(''*:visible'').live(''dragenter'', function(e) {
e.stopPropagation();
$(''body'').addClass(''drag-enter'');
});
Quiero superponer un div sobre la ventana gráfica cuando el usuario arrastra un archivo a la ventana.
Sin embargo, estoy teniendo problemas con la propagación del evento. Cuando configuro la superposición para display: block parece disparar un evento dragleave y luego otro dragenter y luego otra dragleave otra vez, por lo que siempre está en un estado post-dragleave. Por supuesto, llamo a e.stopPropagation() y e.preventDefault() en el objeto de evento, pero no parece marcar la diferencia.
El resultado de console.log () cuando arrastra algo por la ventana:
dragenter
dragenter
dragleave
dragenter
dragleave
El css. #overlay está configurado para display: none por defecto, pero mostrará si body tiene la clase dragenter :
body {
position: absolute;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#overlay {
position: absolute;
height: auto;
width: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg.png) repeat-x top right, url(bg.png) repeat-x bottom left, url(bg.png) repeat-y top right, url(bg.p
ng) repeat-y bottom left;
display: none;
}
body.dragenter #overlay {
display: block;
}
El javascript Agregue la clase ''dragenter'' en dragenter y quítela en dragleave:
$(document).on(''dragenter'', function (e) {
e.stopPropagation();
e.preventDefault();
console.log(''dragenter'');
$(document.body).addClass(''dragenter'');
});
$(document).on(''dragleave'', function (e) {
e.stopPropagation();
e.preventDefault();
console.log(''dragleave'';
$(document.body).removeClass(''dragenter'');
});
El html:
<body>
<div id="overlay">...</div>
...
</body>
La solución más simple es usar dragover use dragover
dragover Este evento se dispara cuando el mouse se mueve sobre un elemento cuando se está produciendo un arrastre. La mayoría de las veces, la operación que ocurre durante un oyente será la misma que el evento dragenter.
Su superposición ocupa todo el tamaño del documento, cuando arrastra, llena su espacio y su mouse se saca efectivamente del cuerpo y ahora está sobre la superposición. Esto desencadena un bucle mouseleave / mouseenter. Para lograr lo que busca, puede vincular el evento a una superposición transparente con un alto índice z sobre la superposición visible que tiene un índice Z más bajo. Esto mantendría el evento en el elemento más alto.
Ejemplo:
var dropZone = function() {
var self = this;
this.eTimestamp = 0;
this.showDropZone = function(e) {
e.stopPropagation();
e.preventDefault();
if (self.eTimestamp + 300 < e.timeStamp) {
$("#coverDropZone").show();
self.eTimestamp = e.timeStamp;
}
return false;
}
this.hideDropZone = function(e) {
e.stopPropagation();
e.preventDefault();
if (self.eTimestamp + 300 < e.timeStamp) {
$("#coverDropZone").hide();
self.eTimestamp = e.timeStamp;
}
return false;
}
this.showImage = function(e) {
e.stopPropagation();
e.preventDefault();
console.log(e);
return false;
}
document.addEventListener(''dragenter'', self.showDropZone, false);
document.addEventListener(''dragleave'', self.hideDropZone, false);
document.addEventListener(''drop'', self.showImage, false);
}