¿Cómo evitar que los elementos secundarios interfieran con los eventos de dragover y caída de HTML5?

Question

Tengo un destino de caída <div> al que he adjuntado los eventos 'soltar' y 'dragover'. El <div> contiene una imagen dentro de una etiqueta de anclaje (simplistamente: <div><a><img /></a></div>). Los elementos secundarios del objetivo parecen bloquear el desencadenamiento de los eventos 'drop' o 'dragover'. Solo cuando el elemento arrastrado está sobre el objetivo, pero NO sobre sus elementos secundarios, ambos eventos se desencadenan como se espera.

El comportamiento que me gustaría lograr es que los eventos 'dragover' y 'drop' se desencadenen en cualquier lugar sobre el destino <div>, independientemente de la existencia de elementos secundarios.

Answer 1

Algo más debe estar sucediendo con su código. Me burlé un ejemplo sencillo aquí:

http://jsfiddle.net/M59j6/6/

y se puede ver que los elementos secundarios no interfieren con los eventos.

Answer 2

La especificación de arrastre & es muy defectuosa y bastante difícil de trabajar.

Al rastrear los elementos secundarios es posible lograr el comportamiento esperado (de los elementos secundarios que no interfieren).

A continuación se muestra un breve ejemplo de cómo hacer esto (con jQuery):

jQuery.fn.dndhover = function(options) { 
    return this.each(function() { 
    var self = jQuery(this); 
    var collection = jQuery(); 

    self.on('dragenter', function(event) { 
     if (collection.size() === 0) { 
     self.trigger('dndHoverStart'); 
     } 

     collection = collection.add(event.target); 
    }); 

    self.on('dragleave', function(event) { 
     collection = collection.not(event.target); 

     if (collection.size() === 0) { 
     self.trigger('dndHoverEnd'); 
     } 
    }); 
    }); 
}; 

jQuery('#my-dropzone').dndhover().on({ 
    'dndHoverStart': function(event) { 
    jQuery('#my-dropzone').addClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    }, 
    'dndHoverEnd': function(event) { 
    jQuery('#my-dropzone').removeClass('dnd-hover'); 

    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
    } 
}); 

Créditos: 'dragleave' of parent element fires when dragging over children elements

Answer 3

algo oblicua a la pregunta original, pero busqué en Google mi camino aquí preguntando lo siguiente :

? ¿Cómo hago una <img />, que es el hijo de un contenedor <div draggable="true">...</div>, se comportan correctamente como un wi mango ¿Con qué mover ese contenedor?

simple: <img src="jake.jpg" draggable="false" />

Answer 4

Puede desactivar el puntero eventos en CSS para todos los niños.

.targetDiv * { 
    pointer-events: none; 
}