javascript - attribute - ¿Cómo evitar que los elementos secundarios interfieran con los eventos de arrastre y caída de HTML5?

video html5

Question

Tengo un objetivo de caída <div> que he adjuntado eventos ''drop'' y ''dragover''. El <div> contiene una imagen dentro de una etiqueta de anclaje (de manera simplista: <div><a><img /></a></div> ). Los elementos secundarios del objetivo parecen bloquear los eventos ''drop'' o ''dragover'' para que no se activen. Solo cuando el elemento arrastrado está sobre el objetivo, pero NO sobre sus elementos secundarios, ambos eventos se activan como se esperaba.

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

Answer 1

Algo más debe estar pasando con tu código. Me burlé de un simple ejemplo aquí:

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

y puedes ver que los elementos hijos no interfieren con los eventos.

Answer 2

Algo oblicuo a la pregunta original, pero busqué en Google aquí preguntándome lo siguiente:

¿Cómo hago un <img /> , que es el hijo de un <div draggable="true">...</div> , se comporta correctamente como un manejador con el que mover ese contenedor?

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

Answer 3

La especificación de arrastrar y soltar está seriamente defectuosa y es bastante difícil trabajar con ella.

Al realizar un seguimiento de 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'' del elemento padre se activa cuando se arrastra sobre elementos hijos

Answer 4

Puede deshabilitar los eventos de puntero en CSS para todos los hijos.

.targetDiv * {
    pointer-events: none;
}